javascript - $(document).scrollTop() 总是返回 0

Question

一旦页面的滚动位置达到一定高度，我只是试图做一些事情。但是scrollTop()返回 0 或者null无论我向下滚动多远。这是我用来检查scrollTop()值的帮助功能：

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

我已经尝试附加scrollTop()到$('body')，$('html')当然$(window)，但没有任何改变。

有任何想法吗？

score 118 · Accepted Answer

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

我希望这对其他人有帮助！

score 53 · Accepted Answer

我在 scroll = 0 中遇到了同样的问题：

document.body.scrollTop

下次使用

document.scrollingElement.scrollTop

编辑 01.06.2018

如果您使用，那么您将获得在orevent中具有document元素的对象。下表显示了不同浏览器上的滚动操作。targetsrcElement

如您所见，Firefox 和 IE 没有srcElement，IE 11 也不支持scrollingElement.

score 9 · Accepted Answer

我的解决方案，在尝试了上述一些并且不涉及更改任何 CSS 之后：

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

这适用于最新版本的 Chrome、Firefox、IE 和 Edge。

score 6 · Accepted Answer

我只是为那些可能和我犯同样错误的人准备了一个插件。我的代码如下：

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

此代码适用于除 webkits 浏览器（如 chrome 和 safari）之外的所有浏览器，因为该<html>标签的 scrollTop 值始终为零或 null。

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

最简单的解决方案就是从您的代码中删除 html 标签等瞧：

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

score 6 · Accepted Answer

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

原因是您可能已将 100% 设置为 html 和 body 元素的 height 属性值。如果将 html 和 body 元素的 height 属性设置为 100%，则它们的高度等于文档的高度。

score 2 · Accepted Answer

有同样的问题。scrollTop() 适用于某些块而不是文档或正文。要使此方法起作用，您应该为块添加高度和溢出样式：

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

进而：

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

score 1 · Accepted Answer

Scroll Top 也总是为我返回 0。我使用它来将焦点集中在页面上的特定元素上。我使用了另一种方法来做到这一点。

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

在移动设备、平板电脑和台式机上工作得很好。

score 1 · Accepted Answer

var bodyScrollTop = Math.max(document.scrollingElement.scrollTop, document.documentElement.scrollTop)

应该适用于现代浏览器。

score 0 · Accepted Answer

顺便说一句，您似乎应该使用

$("body").scrollTop()

代替

$(".some-class").scrollTop

这就是我被卡住的原因。

9 回答 9