JS 滚轮事件 onscroll - Kaiqisan

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

总结

没有总结