pettiboy / react-ui-scrollspy

Customizable Scroll Spy component for react which is Simple, Easy To Use and Lightweight with callback, typescript, auto-update URL hash and throttle support among others.

Home Page:https://pettiboy.github.io/react-ui-scrollspy/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Math for returning to higher offset items appears off

isolationism opened this issue · comments

Your own demo does this as well, though less reliably than my own work with more items and a larger offset. Observe this recording:

react-ui-scrollspy-bug

You can see the issue happens twice; once when I click "Section 2" then again when I click "Section 1". Also note as I click "Section 3" afterward, it momentarily jumps to highlight "Section 1" before sliding down through the other items.

It appears as though the window needs to scroll up an additional pixel or three to trigger activation of the correct menu item. It only occurs when scrolling up; I have never seen the issue when clicking an item that scrolls down.

Hi @isolationism!
Thank you for bringing this to my notice.
I have fixed this issue on Demo2 by adding an offsetBottom.

For your own work you can try the following:

  • Reduce the value of scrollThrottle.
  • If your page contains a navbar a header don't forget to add the following CSS
html {
  scroll-padding-top: 120px;
}

Let me know if this solved your problem!