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!