滚动条禁止_阻止嵌套滚动条的外层滚动行为

需求描述

在页面中的div模块出现滚动条的时候，操作当前div的滚动条时，外部document的滚动条保持禁止。

实现原理

1. 设置开关，默认开启document的滚动条
2. 当鼠标移入到目标模块时候记录当前的document的scrollTop，关闭开关
3. 当鼠标移出目标模块开启开关
4. window.onscroll判断开关是否开启，当开关关闭的时候，scrollTop恒设置为被记录的值

let Top = 0,
    switchScorll = true,
    dom = document.querySelector('.scroll-box');

    dom.addEventListener('mouseenter',()=>{
      switchScorll = false;
      Top = document.documentElement.scrollTop;
    },false);
    dom.addEventListener('mouseleave',()=>{
      switchScorll = true;
    },false);

    window.onscroll = ()=>{
      if(!switchScorll){
        document.documentElement.scrollTop = Top;
      }
    }

点击此处查看Demo

此文原创，附上的BLOG和Github，欢迎star