Question

我有一个简单的滚动动画，当滚动到达某个点时，接着是另一个缩放动画。当向上滚动时，它应该返回到原始状态。我知道可能会有一些排队问题，我该如何解决？首先动画非常糟糕，特别是如果你在本地计算机上执行，那么注释掉的代码就不起作用了。我希望它在向上滚动时返回到原始状态。

https://codepen.io/alexiirj/pen/xpLeve

$(document).ready(function(){ 
     $(window).scroll(function(){
       $('.coverBottom').css('transform', 'translate3d(0,' + $(this).scrollTop()*2 + 'px, 0)');
       if($(window).scrollTop()){
            $('.x').animate({height: '100%', width: '100%'}, 'slow');
        }
        // if($(window).scroll() == 0){
        //  $('.SecondImg').css({height: '200px', width: '200px'});
        // }
    }).scroll();
});

Answer 1

在另一个滚动侦听器中滚动侦听器事件导致此缓慢。滚动停止时没有本机JavaScript事件，但只需几行代码即可轻松检测到。

    // Setup isScrolling variable
var isScrolling;

// Listen for scroll events
window.addEventListener('scroll', function ( event ) {

    // Clear our timeout throughout the scroll
    window.clearTimeout( isScrolling );

    // Set a timeout to run after scrolling ends
    isScrolling = setTimeout(function() {

        // Run the callback
        console.log( 'Scrolling has stopped.' );

    }, 66);

}, false);

为什么滞后于查询动画？

1 个答案: