JavaScript解决滑块滚动穿透

业务背景

在C端需求中，有很多场景是需要拉起一个pad浮层来展示一些详细信息，此时会出现用户手指在pad上进行滑动，但是发现pad后面的页面也在滚动

什么是滚动穿透问题

滚动穿透问题（Scroll Through Issue）是在弹出窗口（如模态框、弹出菜单等）出现时，背后的页面仍然可以滚动的现象。这可能会导致用户在与弹出窗口进行交互时，无意中滚动到背后的页面。

为啥会出现滚动穿透

问题的根本原因是弹出窗口的出现没有阻止背后页面的滚动行为。在用户与弹出窗口交互的过程中，如果鼠标滚轮或触摸操作发生在背后的页面上，浏览器会默认处理这些滚动事件，导致页面滚动，尽管弹出窗口仍然处于可见状态。

解决方案

封装一个hook，传入需要做防止滚动穿透的dom id

核心思路：

1. 监听需要防止滚动穿透的区域，判断用户touchmove和touchstart操作是否超出滚动范围，对于超出滚动范围的行为通过e.preventDefault()来禁止默认行为，也称作防止滚动溢出

2. 输出两个方法preventScrolling，allowScrolling用来控制document.body中被滑块遮盖住的部分是否允许滑动，通过contains(e.target)来判断是否在dom id所在的dom范围之内，如果在dom范围之内，允许滚动，反之不允许滚动，详细参考disableTouchMove方法

hook代码：

import { useRef, useState, useEffect } from 'react';
 
export useFixRollingPenetration = (domId) => {
  let targetLeftY = 0;
  const isMiniAppType = isMiniApp || isRealWeChatMiniProgram;
 
  const disableTouchMove = useRef((e) => {
    const scrollBox = document.getElementById(domId)
    if (scrollBox) {
      //target是否在scrollBox之内,不在范围内就别滚动
      if (!scrollBox.contains(e.target)) {
        e.preventDefault();
      }
    }
  });
  const preventScrolling = () => {
    if (!isMiniAppType && document && document.body) {
      document.body.addEventListener('touchmove', disableTouchMove.current, {
        passive: false,
      });
    }
  };
  const allowScrolling = () => {
    if (!isMiniAppType && document && document.body) {
      document.body.removeEventListener('touchmove', disableTouchMove.current, {
        passive: false,
      });
    }
  };
 
  function onTouchStart(e) {
    targetLeftY = Math.floor(e.targetTouches[0].clientY);
  }
  function onTouchMove(e) {
    let newTargetY = Math.floor(e.targetTouches[0].clientY);
    let dom = document.getElementById(domId);
    let sT = dom.scrollTop;
    let sH = dom.scrollHeight;
    let cH = dom.clientHeight;
    // 判断是否滚动溢出，溢出后e.preventDefault();
    if (sT <= 0 && newTargetY - targetLeftY > 0 && targetLeftY !== 0) {
      e.preventDefault();
    } else if ((sT >= sH - cH) && (newTargetY - targetLeftY < 0)) {
      e.preventDefault();
    }
  }
 
  return {
    preventScrolling,
    allowScrolling,
    onTouchStart,
    onTouchMove,
  }
}

**使用案例：
**

  const {
    preventScrolling,
    allowScrolling,
    onTouchStart,
    onTouchMove,
    onTouchEnd
  } = useFixRollingPenetration('brand-scroll');
 
  useEffect(() => {
    if (showPad) {
      // pad被拉起的时候，执行preventScrolling方法，禁止pad之外的部分默认滚动行为
      preventScrolling();
    } else {      allowScrolling();
    }
    return () => {
      allowScrolling();
    }
  }, [showPad])
 
// html示例
<div className="brand-scroll-wrapper" id='brand-scroll'
    onTouchStart={onTouchStart}
    onTouchMove={onTouchMove}
 />