logo标签列表

$(document).scrollTop()始终返回0

javascriptjqueryscrolltop
74

我想在页面滚动到特定高度时执行某些操作。但是无论我滚动多远，scrollTop() 返回 0 或 null。这是我使用的检查 scrollTop() 值的帮助函数:

$('body').click(function(){
    var scrollPost = $(document).scrollTop();
    alert(scrollPost);
});

我尝试将scrollTop()附加到$('body')、$('html')和当然是$(window)，但什么也没有改变。

有任何想法吗？

2
不是答案，但是顺便说一下...我通常使用jQuery的waypoints插件来处理这种情况。http://getkickstrap.com/apps/waypoints-987090/ - Adam Grant
1
我真的不想使用脚本来替换一个非常基本的JavaScript函数。 - jetlej
4
你的代码对我来说可行：http://jsfiddle.net/ZA7Uj/ - Denys Séguret
1
它在这个jsfiddle上使用Firefox可以工作。 - halex
1
@jetlej，提供一些关于您的环境信息可能会有所帮助。看起来您的代码对某些人有效（包括我在内 - 在 OS X 上使用 Chrome）。您正在使用哪个操作系统/浏览器？ - Whymarrh
显示剩余9条评论
9个回答
118

由于某些原因，从我的html和body标签中删除'height: 100%'，解决了这个问题。

2
解决这个问题的简单方法是在body和html上设置max-height而不是height。 - jwaern
这是由Chrome中的一个错误引起的，很快就会得到修复：https://code.google.com/p/chromium/issues/detail?id=157855 - Stuart P. Bentley
17
对于没有使用 jQuery 的人，我的建议是使用 window.scrollY 代替。 - Stuart P. Bentley
1
只是一点小提示；我发现scrollTop()在不同浏览器中表现不一致，并且可能会受到HTML布局的影响。看起来你的100%高度可能是因为BODY标签内的元素正在滚动，而不是BODY标签本身。所以一旦你让BODY充满整个高度，滚动就会在其上发生，然后使用scrollTop。 - Guy Park
你设置成了什么？对我来说，body 被设置为 height: auto，我相信这也搞砸了它 :/ - oldboy
这是由于Chrome中的一个错误引起的，很快就会修复的：2023年的报告，仍未修复。 - undefined
54

我在以下情况下遇到了scroll = 0的同样问题：

document.body.scrollTop

下次使用

document.scrollingElement.scrollTop

编辑于 2018年01月06日

如果您使用event，则会得到一个具有target或srcElement中的document元素的对象。这里是一个表格，展示了不同浏览器上的滚动操作。 Example

enter image description here

正如您所看到的，Firefox和IE没有srcElement，IE 11不支持scrollingElement。

2
document.scrollingElement.scrollTop 是否适用于移动设备？！ - oldboy
我不知道，现在我正在使用 documentElement 而不是 scrollingElement，它可以正常工作 ;) - Verri
我在重新实现这个功能时遇到了很多问题。我以前已经成功地做过了，但现在遇到了很多复杂的情况。你介意看看我发布到 SO 上的问题（https://stackoverflow.com/questions/50323483/scrolling-progress-bar/50324136#50324136），看看我做错了什么吗？ - oldboy
9

在尝试了上述方法并且不需要更改任何CSS的情况下，我的解决方案如下：

var scroll_top = Math.max( $("html").scrollTop(), $("body").scrollTop() )

这在最新版本的Chrome、Firefox、IE和Edge中都可以工作。

html的scrolltop对我很有用。其他的都没有用，甚至包括body的。我还使用了Bootstrap 4，但我不知道它在幕后对页面做了什么。 - felwithe
OP关注的是子元素，而不是html或body。 - Vishal Kumar Sahu
6

我有一个小提示，针对那些可能会犯和我一样的错误的人。我的代码如下:

var p = $('html,body');
$( ".info" ).text( "scrollTop:" + p.scrollTop() );

这段代码适用于除webkit浏览器（如Chrome和Safari）之外的所有浏览器，因为<html>标签始终具有scrollTop值为零或null。

其他浏览器会忽略它，而webkit浏览器不会。

最简单的解决方法就是从您的代码中删除html标签即可：

var p = $('body');
$( ".info" ).text( "scrollTop:" + p.scrollTop() );
6

从html和body标签中移除height: 100%;可以解决这个问题。

原因是您可能已将html和body元素的高度属性值设置为100％。如果将html和body元素的高度属性设置为100％，它们将获得与文档高度相同的高度。

虽然这理论上回答了问题，但最好在此处包含答案的基本部分，并提供参考链接。 - LW001
链接已失效。 - Andreas Baumgart
页面又挂了。 - sp00n
@sp00n 我将删除链接。那个页面的必要信息已经在这里写了。 - Dawood Najam
2

我有同样的问题。 scrollTop() 只适用于某些块级元素，而不是 document 或 body。 为了使这个方法起作用，您应该为您的块级元素添加高度和溢出样式：

#scrollParag {
    height: 500px;
    overflow-y: auto;
}

然后：

var scrolParag = document.getElementById('scrollParag');
 alert(scrolParag.scrollTop); // works!
1

我也一直遇到 Scroll Top 返回 0 的问题。我曾试图使用它来将焦点放在页面上的特定元素上，但现在我采取了另一种方法。

document.getElementById("elementID").scrollIntoView();

在我的手机、平板电脑和桌面电脑上运行良好。
那真的是一个函数吗？ - Vishal Kumar Sahu
1
var bodyScrollTop = Math.max(document.scrollingElement.scrollTop, document.documentElement.scrollTop)

应该在现代浏览器上工作。
0

顺便说一下，看起来你应该使用

$("body").scrollTop()

而不是

$(".some-class").scrollTop

这就是我卡住的原因。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接