div内部滚动条滚动到底部后触发外层滚动条的解决方案

原创  郑建华   2021-07-05   373人阅读  1 条评论

    当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)
  }
}


本文地址:https://www.zjh336.cn/?id=2047
版权声明:本文为原创文章,版权归 郑建华 所有,欢迎分享本文,转载请保留出处!

发表评论


表情

 评论列表

  1. iMJMJ
    iMJMJ 【初级】  @回复

    网站很棒!~~~~