gilbarbara / react-joyride

Create guided tours in your apps
https://react-joyride.com/
MIT License
6.64k stars 519 forks source link

scrolling to step doesn't seem to respect `scroll-margin-top` #938

Closed jaymzh closed 10 months ago

jaymzh commented 10 months ago

🐛 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 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.

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:

  System:
    OS: Linux 6.1 Debian GNU/Linux trixie/sid
    CPU: (12) x64 AMD Ryzen 5 3600 6-Core Processor
    Memory: 43.38 GB / 62.71 GB
    Container: Yes
    Shell: 5.2.15 - /bin/bash
  Binaries:
    Node: 18.13.0 - /usr/bin/node
    Yarn: 1.22.19 - ~/src/git/ipom/picks-app/node_modules/.bin/yarn
    npm: 9.2.0 - /usr/bin/npm
  npmPackages:
    react-joyride: ^2.5.5 => 2.5.5 
jaymzh commented 10 months ago

Nevermind, I found the scrollOffset prop.