$(window).scroll in vanilla JavaScript

Neo picture Neo · Jan 17, 2013 · Viewed 58.4k times · Source
  1. What's the equivalent of the following in plain JS?

    $(window).scroll(function() { });

  2. I'm also looking to animate scroll, e.g.:

    $('html, body').animate({scrollTop:1750}, 'slow');

Should I be using requestAnimationFrame?

http://paulirish.com/2011/requestanimationframe-for-smart-animating/

Are there any examples that trigger an animation once on click and not continuous renders?

Answer

Jonathan F picture Jonathan F · Jan 18, 2013

Question 1

window.onscroll = function() {
    console.log('scrolling');
};

or if your targeted browsers support addEventListener :

window.addEventListener('scroll', function() {
        console.log('scrolling');
});

Question 2

In my opinion, if you're just scrolling from one section to a another section of your page, and not having some sort of constantly running scrolling movement, you're fine doing this without using requestAnimationFrame.

You can find good implementations of scrolling to a particular part of the window in pure javascript, I suggest checking out their source(or even using them).