Javascript 如何在加载的所有浏览器中抓住不同的开始滚动位置?

Javascript 如何在加载的所有浏览器中抓住不同的开始滚动位置?,javascript,jquery,html,scroll,Javascript,Jquery,Html,Scroll,我需要根据滚动位置是否在0与其他任何位置调用函数。问题是我不能在所有浏览器中使用jQuery(document).ready(…),也不能使用滚动事件侦听器。原因是: 如果页面滚动超过0(意味着他们滚动页面,然后重新加载,因此页面从“记住的”滚动位置开始),那么jQuery的ready功能在所有非chrome浏览器上都会很快出现(他们在那里报告0),在ready功能之后,滚动事件将启动 a。IE(非边缘):ready具有scrollTop0,然后它抛出一个滚动事件并报告新值(例如243) b。I

我需要根据滚动位置是否在0与其他任何位置调用函数。问题是我不能在所有浏览器中使用
jQuery(document).ready(…)
,也不能使用
滚动
事件侦听器。原因是:

  • 如果页面滚动超过0(意味着他们滚动页面,然后重新加载,因此页面从“记住的”滚动位置开始),那么jQuery的
    ready
    功能在所有非chrome浏览器上都会很快出现(他们在那里报告0),在
    ready
    功能之后,滚动事件将启动

    a。IE(非边缘):
    ready
    具有
    scrollTop
    0,然后它抛出一个滚动事件并报告新值(例如243)

    b。IE Edge:
    ready
    具有
    scrollTop
    0,然后它抛出一个滚动事件并报告新值(例如243)

    c。Chrome实际上在
    ready
    之前使用新值触发一个滚动事件,然后触发
    ready
    。它们都报告了新值(例如243)

    d。Safari实际上在
    ready
    之前使用新值触发一个滚动事件,然后触发
    ready
    。它们都报告了新值(例如243)

    e。Firefox
    ready
    具有
    scrollTop
    0,然后抛出一个滚动事件并报告新值(例如243)

  • 如果页面从0开始,则滚动事件将从不抛出(在任何浏览器上)

  • 问题是当它为0时,我需要做一些动画并防止滚动(直到一些用户交互完成)。如果在此之后触发了scroll事件,我无法知道页面应该在那里,而不是用户试图滚动到那里

    我不能只是等待scroll事件,因为如果它是0,它将永远不会被触发

    而使用
    setTimeout
    可能会导致错误和过长的延迟

    你可以在这里看到问题:

    显示问题的页面:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Test</title>
    <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
    </head>
    <body>
    <br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a
    
    <script>
    window.getScrollTopValue = function()
    {
        return ( window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0 );
    };
    
    jQuery( document ).ready(
        function() { console.log( "Ready: " + getScrollTopValue() ); }
    );
    
    document.addEventListener(
        "scroll",
        function (event)
        {
            console.log( "Scroll: " + getScrollTopValue() );
        }
    );
    </script>
    
    </body>
    </html>
    
    
    试验
    
    >a>a>a>aa
    a
    a
    a
    a
    a
    a
    a
    a
    a
    a
    a
    a
    a<
    a
    a
    a<
    a
    a<<<<<<<<<<<<<<<<<<<<<<
    a
    a
    a
    a
    a
    a
    a<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
    a
    aa
    a
    a
    a
    a
    a
    a
    a
    a
    a
    a
    />a
    a
    a
    a
    a
    a
    a
    a
    a
    a
    a
    a
    a
    a
    a
    a
    a
    a
    a
    a
    a
    a
    a
    a
    a
    window.getScrollTopValue=函数() { 返回(window.pageYOffset | | | document.documentElement.scrollTop | | | document.body.scrollTop | | 0); }; jQuery(文档).ready( 函数(){console.log(“Ready:+getScrollTopValue());} ); document.addEventListener( “卷轴”, 功能(事件) { log(“滚动:+getScrollTopValue()); } );

    无论滚动位置是0还是其他位置,我如何获得加载时的滚动位置?

    第一本能:不要干扰浏览器返回用户旧滚动位置的行为。第二条评论:在
    ready
    scroll
    事件之间大约有5毫秒的时间。在文档准备好滚动事件后,可以选择等待20毫秒,如果什么都没有发生,则假定它为0?@user3297291我理解直觉,但这里需要它(显示一整页用户交互片段)。问题是,这两个事件之间的延迟不能保证达到这个数量。如果某个东西需要更长的时间来加载,它可能会更高。我能想到的唯一解决办法是将滚动位置存储在
    localStorage
    中,并使用它来尝试和预测浏览器将做什么…也许您可以使用location hash属性:on scroll event类似的内容:
    document.location.hash=$(window.scrollTop()
    然后在(重新)加载时,您可以知道document.location.hash===''或“0”或什么版本表示:如果您将
    document.ready
    放在
    中,这有点违背了目的。。。当
    加载并执行其中的脚本时,文档的DOM显然已经准备好了,因此
    document.ready
    现在是无用的(还有
    window.load
    顺便说一句)。在控制台中,您甚至可以看到
    document.ready
    实际上是在
    window.load
    之后启动的。这应该是另一种方式!将您的
    放入
    中,使其正常工作(不只是这次,始终如此)。