How to determine how much user will scroll by pixels when user start scrolling using mouse wheel in Javascript

Question

How to determine what amount of pixels will be moved by vertical scroll bar when user start to scroll using mouse wheel in javascript

I have a situation where user's scroll will result change in offsetTop between 200px to 1000px that I like to know ahead of time, do we have any way to figure out this situation using javascript?

Answer 1

If I understand your question correctly, the short answer is 'no'. To illustrate this, consider the following equivalent question:

I have detected a keydown event on the down arrow. Can I predict when the user will release the down key?

This is not possible. It is up to the user when they release the key and you have no way of anticipating when this will be.

Regarding mouse wheel events specifically, you'd also need to consider hardware / mouse and software / browser variations, which is going to make an (already impossible?) task even more difficult.

An alternative approach: Debounce your mouse-wheel events

Without more information about your overall objective it is difficult to know whether this will help, but you can use a debounce function to normalise a mouse-wheel event across a period of time. So whether the user scrolls for (say) 0.5s or 1s, you will only get one event, which should simplify any calculations you need to do.

Here is a basic Javascript Stackblitz example, debouncing a mousewheel event to every 0.1s. If you do a continuous mouse-wheel scroll, only the first event should be emitted.

RxJS has a debounceTime function built in. I'm not familiar with React so I can't advise exactly how this would be applied to mouse events, but the principle would be the same as the example above.