Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

$(window).scroll in vanilla JavaScript

  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?

like image 387
Neo Avatar asked Jan 17 '13 22:01

Neo


People also ask

How do I scrollTo top vanilla JS?

We can set what the "top" is, by providing a Y coordinate, and can call the method on each "click" event on the button: scrollBtn. addEventListener("click", () => { window. scrollTo({ top: 0, behavior: "smooth" }); });

What is $( window scrollTop ()?

$(selector).scrollTop(position) Parameter. Description. position. Specifies the vertical scrollbar position in pixels.

How do I scroll up in JavaScript?

Method 1: Using window.scrollTo() The scrollTo() method of the window Interface can be used to scroll to a specified location on the page. It accepts 2 parameters the x and y coordinate of the page to scroll to. Passing both the parameters as 0 will scroll the page to the topmost and leftmost point.


1 Answers

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).

like image 180
freethejazz Avatar answered Oct 12 '22 13:10

freethejazz