当我给html和body设置满屏高度,且在body上监听滚动事件时,在PC上F12调试得到的scrollTop的值是正常的,但是在真机上查看到的 scrollTop值一直为0,我是已经区分了不同浏览器的情况的(如ScollPostion函数)。
如果给document绑定滚动监听,则scrollTop在PC和真机上一直都不触发监听事件,因为scrollTop在两个平台都没有变化,即还是scrollTop=0
如下代码所示:
html,
body {
overflow-y: auto;
/* 如果给html或者body设置了高度,会导致在真机上的滚动效果scrollTop一直为0 */
height: 100vh;
}
$('body').scroll(() => {
//已经滚动到上面的页面高度
// var scrollTop = $('body').scrollTop();
var scrollTop = this.ScollPostion() && this.ScollPostion().top;
const { top } = this.state;
const dom = document.getElementsByClassName('navTitle')[0];
if (scrollTop > top) {
dom.style.opacity = 1;
} else {
dom.style.opacity = 0;
}
console.log('scrollTop, top', scrollTop, top, this.ScollPostion(), $('body').height());
});
ScollPostion = () => {
var t, l, w, h
if (document.documentElement && document.documentElement.scrollTop) {
t = document.documentElement.scrollTop
l = document.documentElement.scrollLeft
w = document.documentElement.scrollWidth
h = document.documentElement.scrollHeight
} else if (document.body) {
t = document.body.scrollTop
l = document.body.scrollLeft
w = document.body.scrollWidth
h = document.body.scrollHeight
}
return {
top: t,
left: l,
width: w,
height: h,
}
}
当我不设置高度
html,
body {
overflow-y: auto;
/* 如果给html或者body设置了高度,会导致在真机上的滚动效果scrollTop一直为0 */
/* height: 100vh; */
}
且监听到body时,body的滚动监听事件并不触发
之后我改为绑定到document,就能同时在真机和PC上触发滚动监听,得到正确的scrollTop了,这是在是很奇怪
作为单页react应用,我给#root节点绑定了监听事件,并且给该root节点设置了height: 100vh,滚动事件也不触发,不知道为什么。。。不过事件总算是解决了
$(document).scroll(() => {
//已经滚动到上面的页面高度
// var scrollTop = $('body').scrollTop();
var scrollTop = this.ScollPostion() && this.ScollPostion().top;
const { top } = this.state;
const dom = document.getElementsByClassName('navTitle')[0];
if (scrollTop > top) {
dom.style.opacity = 1;
} else {
dom.style.opacity = 0;
}
console.log('scrollTop, top', scrollTop, top, this.ScollPostion(), $('body').height());
});