Faster version of .scrolltop() (v2)

Revision 2 of this benchmark created by Max on

Preparation HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div class="site-container">

<div class="home-section-1">
<div class="wrap">
</div></div>

<div class="home-section-2">
<div class="wrap">
</div>
</div>

</div>

<script type='text/javascript' src='http://localhost/comCharity/wp-includes/js/jquery/jquery.js?ver=1.11.0'></script>
<script type='text/javascript' src='http://localhost/comCharity/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>

Setup

$(document).ready(function() {
           
            var p = $( "div.home-section-4" );
            var image1 = $('.home-section-1 .wrap');
            var content1 = $('.home-section-1 .wrap .widget-wrap');
            var image2 = $('.home-section-2 .wrap');
            var wind = $(window);
            var windheight = $(window).height();
            var section4offset = p.offset().top;
    
    // Function which is called with requestAnimationFrame
           var render = function() {

Teardown


            scrolltop1 = ~~(scrolltop/1.5);
            contentscrolltop = ~~(scrolltop/1.7);
            scrollwindow = scrolltop + windheight;
        
                           image1.css({ transform: "translate3d(0,"+ scrolltop1 + "px,0)"});  
                           content1.css({transform: "translate3d(0,"+ contentscrolltop + "px,0) scale("+ (1-scrolltop/6000) +")" });  
    
               if( scrollwindow > section4offset ) {
    
                                // Enable parallax effect
                                backgroundscroll = ~~((scrollwindow - section4offset)/6);
                                
                   image2.css({ transform: "translate3d(0,"+ backgroundscroll + "px,0)"}); 
    
                        }
            
           }; 
            
            (function loop() {
            window.requestAnimationFrame(loop);
            render();
        })();
    
        (function() {
        var lastTime = 0;
        var vendors = ['ms', 'moz', 'webkit', 'o'];
        for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
            window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
            window.cancelRequestAnimationFrame = window[vendors[x]+
              'CancelRequestAnimationFrame'];
        }
    
        if (!window.requestAnimationFrame)
            window.requestAnimationFrame = function(callback, element) {
                var currTime = new Date().getTime();
                var timeToCall = Math.max(0, 16 - (currTime - lastTime));
                var id = window.setTimeout(function() { callback(currTime + timeToCall); }, 
                  timeToCall);
                lastTime = currTime + timeToCall;
                return id;
            };
    
        if (!window.cancelAnimationFrame)
            window.cancelAnimationFrame = function(id) {
                clearTimeout(id);
            };
    }());
        
    });

Test runner

Ready to run.

Testing in
TestOps/sec
$.scrolltop()
scrolltop = $(window).scrollTop();
ready
scrolltop
scrolltop = document.body.scrollTop
ready
PageyOffset
scrolltop = (window.pageYOffset);
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.