Get scrollTop when scrolling fast

Question

I'm trying to do a specific task when the user scrolls into a particular area.

The issue I'm having is, when the user scrolls at a normal speed, I can capture the current scrollTop position, and trigger the desired function.

If, however, the user scrolls faster, scrollTop seems to only to be captured when the scrolling has slowed down back to a normal speed - meaning the user is able to completely scroll past the area where I want the function to trigger.

I need some way of being updated with every scrollTop position at every scroll speed.

I'm simply using:

$('body').scroll(function(e) 
{
   intScrollPoint = $(body).scrollTop();
});

Any ideas?

I'd recommend using a throttling function, which then fires at a much more reasonable pace. — evolutionxbox
As an example look here jsbin.com/copidifiji/1/edit?html,js,output — krisph

Rahul Rahul · Accepted Answer · 2017-01-31T10:16:15

Throttle can solve your problem,

window.addEventListener('scroll', throttle(callback, 1));

function throttle(fn, wait) {
  var time = Date.now();
  return function() {
    if ((time + wait - Date.now()) < 0) {
      fn();
      time = Date.now();
    }
  }
}

function callback() {
  // do something,
}

For more details, check this link

Get scrollTop when scrolling fast

1 Answers