javascript - How to improve JS scroll performance? - Stack Overflow

admin管理员组

文章数量:1435859

I'm working on revamping my website, and the new one can be found on /

There are mainly two things related to scroll on the site:

• To check on which 'page' the user is on, by calculating the top offset and scroll position, then adding a class to the page.
• To smooth scroll on menu click.

I've written code for both, but there is a lot of lag.

The first one almost always results in lagging. The second one, as a result, lags too. I have included a boolean to check if it's smooth scrolling and disabled the normal scroll events then, but there's not much change.

Do you have any advice on how to improve performance so there is no (or at least, less) lag? Thank you in advance! :)

...Or is it not related to JS at all? I've optimized everything else...

EDIT: Unminified JS at .js

I'm working on revamping my website, and the new one can be found on http://beta.namanyayg./

There are mainly two things related to scroll on the site:

• To check on which 'page' the user is on, by calculating the top offset and scroll position, then adding a class to the page.
• To smooth scroll on menu click.

I've written code for both, but there is a lot of lag.

The first one almost always results in lagging. The second one, as a result, lags too. I have included a boolean to check if it's smooth scrolling and disabled the normal scroll events then, but there's not much change.

Do you have any advice on how to improve performance so there is no (or at least, less) lag? Thank you in advance! :)

...Or is it not related to JS at all? I've optimized everything else...

EDIT: Unminified JS at http://beta.namanyayg./js/main.js

• javascript
• jquery

Share Improve this question Follow edited Dec 30, 2012 at 11:35 Namanyay Goel asked Dec 30, 2012 at 9:28 Namanyay GoelNamanyay Goel 2,72044 gold badges2222 silver badges2727 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

If you are using underscore, it has an awesome _.debounce function that is excellent for this sort of thing.

To check how much the user has scrolled from the top of the page (i.e. on which 'page' he is at the moment) can be achieved with:

$(window).scroll(function () { 
    var scrollAmount = $(window).scrollTop(); // in pixels

    if(scrollAmount > SOME_AMOUNT)
    {
       // add required css class
    }
});

To scroll smoothly, to some id for example, you could use:

$("html, body").animate({ scrollTop: $("#someID").scrollTop() }, 1000);

These are both jQuery solutions, so you should have jquery library included. There is also a nice jQuery plugin called waypoints that performs these calculations. It might prove useful to you and it has some other nice features and examples.

I have the same problem. I have a scrollable div with thousands of smaller divs. Every time I call scrollTop to get the scroll-position or set it, it sometimes waits at least 1 second.

I read these slides: http://www.slideshare/nzakas/high-performance-javascript-2011 (especially slides 138-139) and now I realize that every call to scrollTop, even as a getter, makes javascript relayout the page. This is most likely the cause of delay, but unfortunately I have not found a solution yet, as in a way to call scrollTop without causing relayouts.

Note: I've only been testing on Chrome.

Also read 'Browsers are smart' section of this article: http://www.phpied./rendering-repaint-reflowrelayout-restyle/

I've found an easy solution to the lag with getting scrollTop, just call it inside a scroll-handler and save the result in a variable.

for example in jQuery:

var scrollPos = 0,
    element = $('.class');

element.scroll(function(){
    scrollPos = element.scrollTop();  
});

For the second problem, setting the scrollTop, I reduced the amount of DOM elements by only showing the visible elements. In your case make sure only the visible page(s) are added to the DOM. when scrolling to the next page, in the scroll handler remove the top one (use jQuery .detach) and append the next one to the DOM.

本文标签： javascriptHow to improve JS scroll performanceStack Overflow