1

I'm trying to create the following scroll behavior (in React): each individual 'tick' of the scrollwheel scrolls in multiples of 100 pixels (across browser/OS).

My approach: add a scroll event-handler to the listbox to scroll 100 pixels.

I used onWheel and Element.scrollBy():

onWheel={(event) => {
  event.currentTarget.scrollBy({
    top: Math.sign(event.deltaY) * 100, // 100 pixels in the right direction
    behavior: 'smooth',
  });
}}

https://codesandbox.io/s/modest-lichterman-3iu0r

There are two issues:

  1. Both the user scroll AND the JavaScript scroll execute, and trying to prevent-default on the event doesn't work.
  2. The behavior: 'smooth' animation makes trying to scroll fast extremely slow. I couldn't find how to change the duration of the animation.

I found this Stack Overflow question (and several similar ones), but am not sure how I would apply the answers to this problem.

Thank you!

ISmellPillows
  • 21
  • 5

1 Answers1

1

The functionality I was searching for can be provided via CSS scroll snapping (a browser implemented feature).

CSS Scroll Snap is a module of CSS that introduces scroll snap positions, which enforce the scroll positions that a scroll container’s scrollport may end at after a scrolling operation has completed.

MDN

ISmellPillows
  • 21
  • 5
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Sep 27 '21 at 00:42