js子元素滚动屏蔽父元素的滚动事件

简介

父元素和子元素都是可滚动的，要求父元素和子元素之间的滚动不会互相影响。

🎈 函数实现

子元素滚动到底，父元素也不滚动：

  const removeScroll = (idValue) => {
    const dom = document.getElementById(idValue);
    let eventType = 'mousewheel';
    if (document.mozFullScreen !== undefined) {
      eventType = 'DOMMouseScroll';
    }
    if (dom) {
      dom.addEventListener(eventType, function (event) {
        if (event) {
          let scrollTop = this.scrollTop,
            scrollHeight = this.scrollHeight,
            height = this.clientHeight;

          const delta = (event.wheelDelta) ? event.wheelDelta : -(event.detail || 0);

          if ((delta > 0 && scrollTop <= delta) || (delta < 0 && scrollHeight - height - scrollTop <= -1 * delta)) {
            // IE浏览器下滚动会跨越边界直接影响父级滚动，因此，临界时候手动边界滚动定位
            this.scrollTop = delta > 0 ? 0 : scrollHeight;
            // 向上滚 || 向下滚
            event.preventDefault();
          }
        }
      })
    }
  }

🍀函数调用

  removeScroll(domId); // domId替换为实际的父元素id