gpt4 book ai didi

javascript - 当 html 和 body 的高度为 100% 时,ScrollY/ScrollTop 不起作用

转载 作者:行者123 更新时间:2023-11-28 04:29:10 25 4
gpt4 key购买 nike

我在 html/body 上使用 height: 100%overflow: auto 来修复Chrome 上的滚动错误。但是 ScrollY/ScrollTop 现在总是返回 0。在这种情况下有什么方法可以检查滚动位置吗?

HTML:

<html>
<body>
<div class="wrapper">
<div class="top-nav">
<div class="scroll-wrapper">
</div>
<body>
</html>

CSS:

html {
height: 100%;
overflow: auto;

body {
height: 100%;
overflow: auto;

.wrapper {
.top-nav {
z-index: 999;
position: fixed;
top: 0;
}
.scroll-wrapper {
padding-top: 45px;
}
}
}
}

JS:

    // Add style to top-nav when scrolling down

$('.wrapper').scroll(function () {
if (window.scrollY > 0) //always 0
if ($('.wrapper')[0].scrollTop > 0)
if ($('.scroll-wrapper')[0].scrollTop > 0)
}

最佳答案

编辑

看来您的问题实际上是由 htmlhtml body 具有 overflow:scroll 引起的。

尝试删除其中一个 CSS 规则,看看您最初的问题是否仍然得到解决。

html {
height: 100%;
/* overflow: auto; */

body {
height: 100%;
overflow: auto;

/* ... */

}
}

您还需要更改 JavaScript 以检查文档滚动而不是包装器。

$(document).scroll(function () {
console.log(document.body.scrollTop)
if (document.body.scrollTop > 0) {
// Perform Action
}
})

希望能解决您的问题。

关于javascript - 当 html 和 body 的高度为 100% 时,ScrollY/ScrollTop 不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44770092/

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