【问题标题】:scrollTop() returns 0 in chromescrollTop() 在 chrome 中返回 0
【发布时间】:2011-10-19 09:12:59
【问题描述】:

我想检查页面加载完成后是否滚动,我正在使用此代码:

$(document).ready(function(){   
    alert($(window).scrollTop());
});

它在 Firefox 中运行良好,但在 Chrome 中总是返回 0。这是为什么呢?

【问题讨论】:

  • 什么情况?您是否正在检查访问者是否使用#hash 标签访问了您的页面?或者您是否正在检查访问者是否在文档完成加载之前滚动?还是两者兼而有之?
  • 我正在对刚刚滚动到视图中的元素运行动画。但是如果你向下滚动页面并点击刷新。重新加载的页面会自动滚动到上一个滚动点(预刷新),所以我想知道窗口的滚动位置以确定页面上的哪些元素已经滚动到视图中并开始动画

标签: javascript jquery google-chrome


【解决方案1】:

实际上,Firefox 是唯一一个在 domReady 或 window.onload 上对 $(window).scrollTop() 不返回 0 的浏览器。 Chrome、Safari 和 IE 都返回 0。在 domReady 上获得正确滚动条位置的唯一安全方法是,如上面另一个答案中所述,在窗口的滚动事件上设置事件处理程序,如下所示:

$(document).ready(function(){   
    $(window).scroll(function() {
        console.log($(window).scrollTop());
        $(window).unbind('scroll');
    });
});

【讨论】:

  • 我真的不明白为什么人们对你的答案投了反对票。这真的有效。另外,我观察到 Chrome 会触发两次滚动事件。第一次是正常页面加载,第二次是滚动到用户之前的位置(例如,在按 F5 重新加载页面后)。
【解决方案2】:

当窗口不可滚动时,$(window).scrollTop() 将返回 0

【讨论】:

    【解决方案3】:

    加载 DOM 后,chrome 会恢复预刷新滚动位置。因此,在滚动事件而不是就绪事件上获取 scrollTop 将起作用。

    【讨论】:

      【解决方案4】:

      我还遇到了scrollTop() 在 Chrome 中总是返回 0 的问题,无论我是在 windowdocument 还是 'html,body' 上使用它。我终于发现 css 是问题所在:

      html, body {
          height: 100%;
          overflow-x: hidden;
      }
      

      实际上,我不知道具体原因,因为您可以删除部分代码,然后它又可以工作了。奇怪但问题解决了;)

      【讨论】:

      • 非常感谢!确实很奇怪!在 Safari 上工作但不在 chrome 上工作,在我将它添加到我的 css 后,两者都适用于两种浏览器!
      【解决方案5】:

      在页面底部有一些文本和链接的页面中尝试以下代码。记住要有足够的文本或空白行,以便滚动页面,直到您可以看到我的按钮

       $(document).ready(function () {
              alert($(window).scrollTop()); // first load if you did not scroll = 0
              $("#button").click(function () { alert($(window).scrollTop()); }); 
              // hitting the button that is located on bottom of page 
              // - i had to scroll the page = xxx (68 in may case)
          });
      

      在你的情况下得到 0 是正常的,因为页面没有滚动,你的位置和页面顶部之间的偏移量是 0。

      我在 Chrome、FF6、IE9 中尝试过。 希望对您有所帮助。

      【讨论】:

      • 单击#button 获取 .scrollTop() 不是问题.. 如果您向下滚动页面并点击刷新。该页面将从您滚动到(刷新前)的点加载..这就是我想知道的位置。如果你在 FF 中这样做会输出正确的值。在 Chrome 14.0 中它返回 0 .
      【解决方案6】:

      我遇到了同样的问题,但通过添加文档声明得到了解决:

      <!DOCTYPE html>
      

      【讨论】:

        猜你喜欢
        • 2012-10-08
        • 2015-03-14
        • 1970-01-01
        • 1970-01-01
        • 2016-07-13
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多