ヤッハロー、Kaiqisanすうう、一つふつうの学生プログラマである.在页面过于长的时候会产生滚轮，这一章要讲的就是滚轮事件。 有些时候，我们在写一些事件的时候需要通过判断块边界(利用offsetTop,offsetLeft)来实现一定的效果（拖拽移动等），但是，如果网页中存在滚轮，那么在滚轮产生滚动的时候，边界的判断就会产生错误，用户体验会直线下降。于是这个滚轮事件就可以完美解决这个问题。

获取一个滚轮事件非常简单。

window.onscroll = () => { let a = document.documentElement.scrollTop || document.body.scrollTop; // 兼容 console.log(a) }

每次滚轮滚动的时候，它距离顶部的距离就会被监听。

在这里scrollTop这个属性是关键，要牢记，它对应上下滑动的滚轮。如果产生的是左右滑动的滚轮的话可以使用scrollLeft这个属性。

但是

上面的方法只能监听由body标签产生的滚轮，如果body内部某个标签元素产生滚轮，上面的window.onscroll就无法检测到。

<div class="demo"> <div class="inner-demo">ddd</div> </div> .demo { width: 500px; height: 400px; border: 1px solid #000000; overflow: auto; } .inner-demo { width: 300px; height: 900px; /* 内部元素高度更高，使demo元素产生上下滑动的滚轮 */ } window.onscroll = () => { console.log('ok'); }

然后，我们会发现，这样根本无法触发方法。

这个就是DOM的基本原理的问题了，需要这样解决，要为产生滚轮的元素分配监听。

let objDemo = document.getElementsByClassName('demo') objDemo[0].onscroll = (e) => { console.log(objDemo.scrollTop); }

除此之外

在滚轮事件中，还有俩可用的属性 scrollHeight scrollWidth它代表实际内容的宽度，高度，不包边线宽度，会随对象中内容超过可视区后而变大

总结

没有总结