再次更新:又碰到了个问题,不是html或body作为滚动容器的话,当fixed定位的菜单在鼠标光标位于其上方时,无法滚动。。。所以 必须使用html或body作为容器来滚动。。。
以下是旧的:
更新:今天再次遇到了这个问题,我更换了绑定滚动的对象从html变成了<div class="home"></div>,但是绑定滚动事件仍然使用以下:
if (document.addEventListener) {
document.addEventListener('scroll', this.onScroll, false)
} // W3C
window.onmousewheel = document.onmousewheel = this.onScroll
所以导致了onScroll监听到的数值变化都慢一拍,比如第一次滚动100,console仍然是0,第二次滚动才是第一次的值!
当我把绑定的对象换成了类home之后,一切都豁然开朗。。。
if (document.addEventListener) {
document.addEventListener('scroll', this.onScroll, false)
} // W3C
document.querySelector('.Home').onscroll = this.onScroll
以下是旧时遇到的问题,解决办法不一定是对的,仅供参考:
----------------------------------------------------------------------------------------------
在使用vue做 “固钉” 效果时,碰到了以下巨坑
我是这样子绑定滚动监听事件的:
if (document.addEventListener) {
document.addEventListener('DOMMouseScroll', this.onScroll, false)
} // W3C
window.onmousewheel = document.onmousewheel = this.onScroll
console.log('绑定在DOMMouseScroll上导致的坑', document.documentElement.scrollHeight, document.documentElement.scrollTop, document.documentElement.clientHeight) // 打印结果,当用户操作滚动条的时候会出现当前获取到的值是上一次的值(document.documentElement.scrollTop),这就导致了滚动始终会出现差一截px的现象,并且当用户手动拉动滚动条时,不触发滚动事件!!!
解决:
if (document.addEventListener) {
document.addEventListener('scroll', this.onScroll, false)
} // W3C
window.onmousewheel = document.onmousewheel = this.onScroll
我有以下2个方法处理滚动:
onScroll (e) {
e = e || window.event
let header = document.querySelector('.header')
let position = this.ScollPostion()
this.position = position
if (position.top === 0) {
header.style.boxShadow = '0 0 0 0 rgba(0, 0, 0, 0.5)'
} else {
header.style.boxShadow = '0 2px 50px 0 rgba(0, 0, 0, 0.5)'
}
},
ScollPostion () {
let 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
}
}