当div内部和外部均有滚动条时，内部滚动条滚动到底部后，会触发外部的滚动条。常见的场景包括，一个弹窗，其中包含一个div，这个div内部有滚动条，当我们鼠标移入div内部进行滚动时，一不小心滚动到底div的底部后，会发现弹窗的滚动条也跟着下去了，这样体验就十分的不友好了，我们想要的到效果是，当鼠标在div内部进行滚动时，滚动到底部后停止动作，而当鼠标不在div内部时，滚动触发的是弹窗的滚动条。
实现思路：
根据现象，当内部滚动条触底时，才会引发外部的滚动操作，如果让内部的滚动条不进行触底操作，则可以实现这个功能了。
具体方案：
<div @scroll="dropDownScrollFun"></div>
// 下拉框滚动条监听
dropDownScrollFun(val) {
// 获取下拉框对象
const scroll = document.querySelector('.dropDown-' + this.refName + '-scroll')
/**
* 处理div内部滚动条滚动到底部后导致 再次滚动时触发外部的滚动条
* 处理方法为：
* 当前内部滚动条滚动到距离底部小于等于2px时,将其滚动条位置 重置为距离底部2px
* scrollTop: 可视区域顶部与滚动条顶部的距离
* scrollHeight: 整个滚动条的高度
* clientHeight: 可视区域的高度
*/
// 当前滚动条距离底部还剩2px时
if (scroll.scrollHeight - (scroll.scrollTop + scroll.clientHeight) <= 2) {
// 定位到距离底部2px的位置
scroll.scrollTop = (scroll.scrollHeight - scroll.clientHeight - 2)
}
}
发表评论