gpt4 book ai didi

javascript - 滚动事件触发,但没有scrollTop或offset.top值

转载 作者:行者123 更新时间:2023-12-03 05:37:39 27 4
gpt4 key购买 nike

以下 JS 代码有效,但 offset().top 和scrollTop() 的值分别保持为 0。

$("body, html").scroll(function() {
// event triggers on scrolling
var foo = $("body, html").offset().top;
var bar = $("body, html").scrollTop();

console.log(foo); // ==> 0 all the time
console.log(bar); // ==> 0 all the time
});

我有一种不好的预感,这在某种程度上与 CSS 溢出有关,但我无法弄清楚。

这里是可运行的片段:

$("body, html").scroll(function() { 
var bar = $(this).scrollTop(); console.log(bar);
});
html { 
overflow: auto;
height: 100%;
}

body {
overflow: auto;
height: 100%;
overflow-x: hidden;
}

div {
background: #FF9900;
}
<html>
<head>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"> </script>

<div style="height: 1000px;">Hi there.</div>
</body>
</html>

最佳答案

是的,这与 CSS 溢出有关。当不需要时,您不应该显式分配溢出,例如在您设置的 body 和 html 标签上,在这种情况下,div 的长度会导致 body 滚动。设置这些溢出:自动属性会导致与两个滚动条发生冲突,并可能给您带来一些不稳定的结果。

我设置了这个与您类似的基本示例,只是为了测试并且它有效。 scrollTop 按其应有的方式更改。 offsetTop 保持为 0,因为整个 body 是静止的,而您只是向下滚动。

<html>
<style>
body {
overflow-x: hidden;
}

div {
background: #FF9900;
}
</style>

<head>
</head>
<body id='body'>
<div id="test" style="height: 1000px;">Hi there. Click me.</div>
<script>
document.getElementById('body').addEventListener('click', function() {
var scrollthing = document.getElementById('body').scrollTop;
var scrollthing2 = document.getElementById('body').offsetTop;
console.log('SCROLLTOP IS' + scrollthing);
console.log('OFFSETTOP IS' + scrollthing2);
});
</script>
</body>
</html>

关于javascript - 滚动事件触发,但没有scrollTop或offset.top值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40662645/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com