js做固钉效果 滚动事件监听值总是上一次的 在滚动事件绑定时碰到的坑DOMMouseScroll

再次更新：又碰到了个问题，不是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

}

}