$ {document）.scrollTop（）始终返回0

73

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

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

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

有任何想法吗？

javascript jquery scrolltop

— 杰特莱
source

2

不是答案，而是一个注解...我通常将jQuery Waypoints插件用于此类操作。getkickstrap.com/apps/waypoints-987090

— 亚当·格兰特

1

我真的不想使用脚本来替换极其基本的javascript函数。

— jetlej 2012年

4

您的代码对我有用

— DenysSéguret2012年

1

它正在与Firefox一起在此jsfiddle中工作

— halex 2012年

1

@jetlej有关您的环境的一些信息可能会有所帮助。您的代码似乎适用于某些代码（包括我-OS X上的Chrome）。您正在使用什么操作系统/浏览器？

— Whymarrh

118

由于某些原因，从我的html和body标签中删除“ height：100％”可解决此问题。

我希望这可以帮助其他人！

— 杰特莱
source

2

解决此问题的简单方法是在body和html上设置max-height而不是height。

— jwaern 2014年

这是由Chrome中的一个错误引起的，该错误将很快得到修复：code.google.com/p/chromium/issues/detail?id=157855

— Stuart P. Bentley，

14

对于那些不使用jQuery的人，我的建议是改用jQuery window.scrollY。

— Stuart P. Bentley

1

只是一个旁注；我发现scrollTop()跨浏览器不一致，并且可以用html的布局来称赞。看来您100％的高度可能是因为BODY标签中的某个元素正在滚动，而不是BODY标签本身。因此，一旦您使身体达到最高高度，便会在其上滚动，从而使您scrollTop习惯了。

— Guy Park

您设置了什么？对我body来说height: auto，我相信也会陷入困境：/

— oldboy '18

47

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

document.body.scrollTop

下次使用

document.scrollingElement.scrollTop

编辑01.06.2018

如果您使用，event则会得到document在target或中具有元素的对象srcElement。下表显示了在不同浏览器上的滚动操作。

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

— 韦里
source

2

对document.scrollingElement.scrollTop移动设备友好吗？

— 老男孩

我不知道，现在我使用的documentElement，而不是scrollingElement和它的作品;）

— VERRI

我遇到了再次实现此功能的问题。我过去已经成功地做到了，现在我遇到了很多麻烦。您介意看一下我发给SO的这个问题，看看您是否发现我的工作有问题吗？

— 老男孩

9

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

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

此功能适用于最新版本的Chrome，Firefox，IE和Edge。

— 史蒂夫·洛克伍德
source

html的滚动条为我工作。什么也没做，甚至body是。不过，我也在使用Bootstrap 4，我不知道它对幕后页面的作用。

— felwithe

6

对于那些可能犯与我相同的错误的人，我只有一个附加组件。我的代码如下：

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() );

— 坎巴·比洛拉·泰德（Kamba-Bilola Ted）
source

6

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

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

— 达伍德·纳贾姆（Dawood Najam）
source

尽管从理论上讲这可以回答问题，但最好在此处包括答案的基本部分，并提供链接以供参考。

— LW001

链接已死。

— 安德里亚斯·鲍姆加特

页面再次掉下来。

— sp00n

@ sp00n我将删除链接。该页面的必要信息已在此处编写。

— Dawood Najam

1

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

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

接着：

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

— 瓦西尔·古特尼克（Vasyl Gutnyk）
source

1

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

document.getElementById（“ elementID”）。scrollIntoView（）;

在移动设备，平板电脑和台式机上对我来说效果很好。

— 帕特尔
source

1

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

应该可以在现代浏览器上使用。

— 混沌器
source

0

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

$("body").scrollTop()

代替

$(".some-class").scrollTop

这就是为什么我被困住了。

— ch271828n
source