ヤッハロー、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
它代表实际内容的宽度,高度,不包边线宽度,会随对象中内容超过可视区后而变大
总结
没有总结