滚动事件未发生时的运行功能

Question

我有一个要在2种情况下触发的动画：

当页面首次加载且浏览器未自动滚动时
刷新页面后，浏览器将用户自动滚动到其先前位置，并且该位置（ 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);
}

请注意，由于某些浏览器始终将<html>的滚动位置分配为0 ，因此应该从<body>元素而不是<html>来测量scrollTop 。

工作提琴

滚动事件未发生时的运行功能

问题描述

1 个解决方案

解决方案1
1 已采纳 2014-02-11 17:00:05

滚动事件未发生时的运行功能

问题描述

1 个解决方案

解决方案1 1 已采纳 2014-02-11 17:00:05

解决方案1
1 已采纳 2014-02-11 17:00:05