子元素scroll父元素容器不跟随滚动

问题描述

很多时候父元素和子元素都有滚动条的时候，子元素在滚动到顶部或底部的时候，父元素就会开始滚动，但是很多时候我们只是滚动过快而已，如果父元素滚动了，就会影响子元素的查看，那么如何在子元素滚动到顶部或者底部的时候，父元素也不能滚动呢？

代码实现

新建一个js模块：

function scrollUnique(dom) {
   return $(dom).each(function() {
       let eventType = 'mousewheel';
       // 火狐是DOMMouseScroll事件
       if (window.navigator.userAgent.includes('Firefox')) {
           eventType = 'DOMMouseScroll';
       }

       $(dom).on(eventType, function(event) {
           // 一些数据
           let scrollTop = this.scrollTop;
           let scrollHeight = this.scrollHeight;
           let height = this.clientHeight;

           let delta = event.originalEvent.wheelDelta ? event.originalEvent.wheelDelta : -(event.originalEvent.detail || 0);  // 滚轮滚动一格的像素值，向上滚动为正值。

           // console.log('scrollTop', this.scrollTop);
           // console.log('scrollHeight', this.scrollHeight);
           // console.log('clientHeight', this.clientHeight);
           // console.log('delta', delta);

           if ((delta > 0 && scrollTop <= delta) || (delta < 0 && scrollHeight - height - scrollTop <= -1 * delta)) {
               // IE浏览器下滚动会跨越边界直接影响父级滚动，因此，临界时候手动边界滚动定位
               $(dom).scrollTop = delta > 0 ? 0 : scrollHeight;
               // 阻止浏览器默认滚动事件（父元素的滚动）
               event.preventDefault();
           }
       });
   });
}

export {scrollUnique} 

使用的时候，引入这个js模块，然后参数dom选择子元素的class或者id即可。

import { scrollUnique } from "@commons/utils.js";

// 展开可显示字段列表
showField() {
   this.showFieldsFlag = true;

   this.$nextTick(()=>{
       scrollUnique('.multiple-choice');
   });
}, 

参考链接

https://www.zhangxinxu.com/wordpress/2015/12/element-scroll-prevent-parent-element-scroll-js/