[英]ScrollY/ScrollTop doesn't work when height of html and body is 100%
I'm using height: 100%
and overflow: auto
on html
/ body
to fix a scroll bug on Chrome. 我正在使用
height: 100%
和overflow: auto
在html
/ body
上修复Chrome上的滚动错误。 However ScrollY
/ ScrollTop
always return 0 now. 但是
ScrollY
/ ScrollTop
现在总是返回0。 Is there any way to check scroll position in this case? 在这种情况下有没有办法检查滚动位置?
HTML: HTML:
<html>
<body>
<div class="wrapper">
<div class="top-nav">
<div class="scroll-wrapper">
</div>
<body>
</html>
CSS: 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: 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)
}
EDIT 编辑
It appears your issue actually steams from both html
and html body
having overflow: scroll
. 看来你的问题实际上来自
html
和html body
都有overflow: scroll
。
Try removing one of those CSS rules and see if your initial problem is still solved. 尝试删除其中一个CSS规则,看看您的初始问题是否仍然已解决。
html {
height: 100%;
/* overflow: auto; */
body {
height: 100%;
overflow: auto;
/* ... */
}
}
You also need to change your javascript to check for document scrolling and not the wrapper. 您还需要更改您的javascript以检查文档滚动而不是包装器。
$(document).scroll(function () {
console.log(document.body.scrollTop)
if (document.body.scrollTop > 0) {
// Perform Action
}
})
Hope that solves your issue. 希望能解决你的问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.