I have a menu bar on the top of my site so I have a scroll-margin-top: 75px; style so that #-links work and other element.scrollIntoView stuff works properly. However, it doesn't seem to apply to Joyride's scrollToStep which uses some math I don't quite understand to calculate a specific scrollY and scroll to that using scrollTo from dom.js. As such the elements that JoyRide scrolls to aren't fully in view.
To Reproduce
Add:
* {
scroll-margin-top: 200px;
}
and notice it has no effect on the walkthru/tour scrolling.
🐛 Bug Report
I have a menu bar on the top of my site so I have a
scroll-margin-top: 75px;
style so that #-links work and otherelement.scrollIntoView
stuff works properly. However, it doesn't seem to apply to Joyride'sscrollToStep
which uses some math I don't quite understand to calculate a specificscrollY
and scroll to that usingscrollTo
fromdom.js
. As such the elements that JoyRide scrolls to aren't fully in view.To Reproduce
Add:
and notice it has no effect on the walkthru/tour scrolling.
Expected behavior
Joyride respects
scroll-margin-top
.Link to repl or repo (highly encouraged)
Please provide a https://codesandbox.io/ demo or similar.
Issues without a reproduction link are likely to stall.
Run
npx envinfo --system --binaries --npmPackages react-joyride
Paste the results here: