Home:ALL Converter>How To Control Scroll Distance?

How To Control Scroll Distance?

Ask Time:2021-09-22T05:34:47         Author:ISmellPillows

Json Formatter

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!

Author:ISmellPillows,eproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article:https://stackoverflow.com/questions/69275802/how-to-control-scroll-distance
yy