jQuery 无法在 Chrome 和 Firefox 中使用 scrollTop()
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18778020/
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
Can't get scrollTop() to work in both Chrome & Firefox
提问by Jonny Cerveza
I am having trouble getting the scrollTop() method to work in both Firefox and Chrome. I used $('body, html').scrollTop();however, it doesn't work in Chrome. Only $('body').scrollTop();works in Chrome. Any thoughts would be greatly appreciated. Below is my code.
我无法在 Firefox 和 Chrome 中使用 scrollTop() 方法。$('body, html').scrollTop();但是我用过，它在 Chrome 中不起作用。仅$('body').scrollTop();适用于 Chrome。任何想法将不胜感激。下面是我的代码。
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<style type="text/css">
body {
height: 2000px;
}
#light {
display: block;
position: fixed;
top: 50%;
left: 50%;
margin-left: -400px;
margin-top: -200px;
width: 800px;
height: 400px;
background-color: blue;
z-index:1002;
overflow: auto;
}
</style>
</head>
<body>
<div id="light">
</div>
<!-- Used the google jQuery link for ease of use in this example -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(window).scroll(function () {
var offset = $('body, html').scrollTop();
var view = $(window).height();
var total = $(document).height();
var percent = 1-(offset / (total - view));
var widthFactor = 800*percent;
var marginFactor = -(400*percent)
if(percent > 0.33){
$("#light").css({ "width" : widthFactor,
"margin-left" : marginFactor});
};
});
});
</script>
</body>
</html>
回答by Dustin Blake
Use the document object instead
改用文档对象
$(document).scrollTop();
回答by DoubleA
I had this same issue. Best solution for me was to do it on window:
我有同样的问题。对我来说最好的解决方案是这样做window：
var offset = $(window).scrollTop();
In order for this to work though, your body and html elements can't have a heightset to 100%. use min-heightinstead
但是，为了使其正常工作，您的 body 和 html 元素不能height设置为100%. 使用min-height替代
EDIT: the HTMLelement can use height: 100%, however if you need the bodyto stretch to full height you have to use min-height: 100%instead. Otherwise the scrollTopalways returns "0"
编辑：HTML元素可以使用height: 100%，但是如果您需要将body拉伸到全高，则必须min-height: 100%改用。否则scrollTop总是返回“0”
回答by S. S. Rawat
回答by mrmoment
You use multiple selector and it will return an array of DOM elements. Calling getter function of this array seems undefined in Chrome (setter functions should work)?
您使用多个选择器，它将返回一个 DOM 元素数组。在 Chrome 中调用此数组的 getter 函数似乎未定义（setter 函数应该可以工作）？
Anyway you can use $('body').scrollTop() || $('html').scrollTop()in you case.
无论如何，你可以$('body').scrollTop() || $('html').scrollTop()在你的情况下使用。
Or just $(document) as mentioned in Justin's answer.
或者只是贾斯汀的回答中提到的 $(document) 。
回答by Anders
Used this solution:
使用了这个解决方案：
window.scrollY || window.pageYOffset || document.body.scrollTop + (document.documentElement && document.documentElement.scrollTop || 0)
window.scrollY || window.pageYOffset || document.body.scrollTop + (document.documentElement && document.documentElement.scrollTop || 0)
Supplied in this answer in another thread: https://stackoverflow.com/a/33462363
在另一个线程的这个答案中提供：https: //stackoverflow.com/a/33462363
You don't need to involve jQuery and it works fine for me.
你不需要涉及 jQuery，它对我来说很好用。
回答by Anders
try this simple javascript code for scroll element using id
尝试使用 id 滚动元素的这个简单的 javascript 代码
document.getElementById("id").scrollTop=0;
回答by ehtulhaq
Remove height style from the body,html tags. Add an id to the main div under body e.g. #content then use following script. As previously quoted run $(document).scrollTop();in the browser console and make sure it returns a value not 0.
从 body,html 标签中删除高度样式。将id 添加到body 下的主div，例如#content，然后使用以下脚本。如前所述$(document).scrollTop();，在浏览器控制台中运行并确保它返回的值不是 0。
$('body, html').animate({
scrollTop: $('#content ').offset().top
}, 1000);
