Question

我有一个动画，我想在两种情况下开火：

第一次加载页面时，浏览器不会自动滚动
刷新页面后，浏览器会自动将用户滚动回原位置，并且该位置（scrollTop()）小于300。

我不希望在以下情况下触发事件：

用户刷新页面，浏览器会自动滚动到超过300的位置。

检测浏览器自动滚动的唯一方法（我知道）是触发此代码：

$(window).load(function(){
    $(this).one('scroll', function(){
        var pagePosition = $('html').scrollTop();
    }
});

但是，如果我运行此代码：

$(window).load(function(){
    // run on original page load (no scroll)
    myAnimation();

    // run on page refresh w/ auto-scroll
    $(window).one('scroll', function(){
        var pagePosition = $('html').scrollTop();

        if( pagePosition < 300 ) {
            myAnimation();
        }
    }
}

动画将在原始页面加载时触发两次。一旦加载页面，并在用户开始滚动时再次加载。

我需要一些方法来检测浏览器是否在加载时自动滚动，如果不，则运行动画一次。

Answer 1

这与仅在滚动位置小于300时仅仅滚动加载不同，例如：

$(window).load(function(){
    setTimeout(function() {
        var pagePosition = $('body').scrollTop();

        if( pagePosition < 300 ) {
            myAnimation();
        }
    }, 0);
}

请注意，您应该从scrollTop元素而不是<body>衡量<html>，因为某些浏览器始终为<html>分配0的滚动位置。< / p>

工作fiddle

滚动事件不发生时运行函数

1 个答案: