Javascript $(document).scrollTop() 总是返回 0

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/12788487/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 11:16:44  来源:igfitidea点击:

$(document).scrollTop() always returns 0

javascriptjqueryscrolltop

提问by jetlej

I'm simply trying to do something once the scroll position of the page reaches a certain height. However scrollTop()is returning 0 or nullno matter how far down I scroll. This is the help function I'm using to check the scrollTop()value:

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

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

I've tried attaching scrollTop()to $('body'), $('html')and of course $(window), but nothing changes.

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

Any ideas?

有任何想法吗?

回答by jetlej

For some reason, removing 'height: 100%' from my html and body tags fixed this issue.

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

I hope this helps someone else!

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

回答by Verri

I had same problem with scroll = 0 in:

我在滚动 = 0 时遇到了同样的问题:

document.body.scrollTop

Next time use

下次使用

document.scrollingElement.scrollTop

Edit 01.06.2018

编辑 01.06.2018

If you using eventthen you got object which has documentelement in targetor srcElement. ExampleHere is a table showing scroll operation on different browsers.

如果您使用,event那么您将获得documenttargetor中包含元素的对象srcElement例子这是一个表格,显示了不同浏览器上的滚动操作。

enter image description here

在此处输入图片说明

As you can see Firefox and IE doesn't have srcElementand IE 11 doesn't support scrollingElement.

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

回答by Steve Lockwood

My solution, after trying some of the above and which doesn't involve changing any CSS:

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

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

This works in up-to-date versions of Chrome, Firefox, IE and Edge.

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

回答by Kamba-Bilola Ted

I just have an add-on for those who might make the same mistake as I did. My code was as followed:

我只是为那些可能和我犯同样错误的人提供了一个附加组件。我的代码如下:

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

This code will work on all browser except for webkits browser such as chrome and safari because the <html>tag always has a scrollTop value of zero or null.

此代码适用于除 webkit 浏览器(例如 chrome 和 safari)之外的所有浏览器,因为该<html>标签的 scrollTop 值始终为零或 null。

The other browsers ignore it while webkit's browsers don't.

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

The simplest solutution is just to remove the html tag from your code et Voila:

最简单的解决方案就是从你的代码中删除 html 标签,瞧:

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

回答by Dawood Najam

Removing height: 100%;from html and body tags can resolve the issue.

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

The reason is that you might have set 100% as value of height property of html and body elements. If you set the height property of html and body elements to 100%, they get height equal to document's height.

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

回答by Hiral Patel

Scroll Top was always returning 0 for me as well. I was using it for bringing focus to the specific element on a page. I used another approach to do so.

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

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

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

Working well for me on mobile, tablet, and desktop.

在手机、平板电脑和台式机上对我来说效果很好。

回答by Vasyl Gutnyk

had the same problem. scrollTop() works with some block not document or body. To make this method work u should add height and overflow style for your block:

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

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

And then:

进而:

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

回答by ch271828n

By the way, it seems that you should use

顺便说一句,似乎你应该使用

$("body").scrollTop()

instead of

代替

$(".some-class").scrollTop

This is why I am stuck.

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

回答by chaosifier

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

should work on modern browsers.

应该适用于现代浏览器。