React触屏项目：如何防止滑动滚动元素时出现屏幕空白？

我有一个运行在触屏设备上的React项目，遇到以下问题：

• 用户按住并滑动组件（无论组件是否带有滚动条）时，应用的主容器会向对应方向滑动，视口中会出现根容器外侧的空白区域（类似部分手机应用中按住拖动时出现的反向空白）。
• 给组件添加CSS属性touch-action: none可以解决问题，但如果给带有滚动条的组件设置pan-x或pan-y，当滚动到边缘时，空白区域问题会再次出现。

当前使用的HTML viewport meta标签：

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, minimum-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no">

希望实现页面静态化，滑动组件时页面不向任何方向偏移，因此提出两个问题：

1. 如何防止触屏上按住滑动元素导致的空白区域？需要逐个处理元素吗？
2. 是否有简便方法可以一次性在整个项目中禁用该特性？

针对问题1：精准处理带滚动的组件 #

不需要逐个处理所有元素，只需针对带有滚动条的组件做特殊处理，普通无滚动的组件可通过全局规则覆盖。

对于带滚动的组件，除了设置touch-action: pan-x或pan-y，还需通过JavaScript监听滚动事件，在滚动到边缘时阻止触摸事件的默认行为，避免事件冒泡到根容器触发页面滑动：

import { useEffect, useRef } from 'react';

const ScrollableComponent = () => {
  const scrollRef = useRef(null);

  useEffect(() => {
    const handleTouchMove = (e) => {
      const element = scrollRef.current;
      if (!element) return;

      // 垂直滚动边界判断
      const isAtTop = element.scrollTop === 0;
      const isAtBottom = element.scrollHeight - element.scrollTop === element.clientHeight;
      
      // 水平滚动边界判断
      const isAtLeft = element.scrollLeft === 0;
      const isAtRight = element.scrollWidth - element.scrollLeft === element.clientWidth;

      // 滚动到边缘且继续向超出方向滑动时，阻止默认行为
      if ((isAtTop && e.touches[0].clientY > e.targetTouches[0].clientY) || 
          (isAtBottom && e.touches[0].clientY < e.targetTouches[0].clientY) ||
          (isAtLeft && e.touches[0].clientX > e.targetTouches[0].clientX) ||
          (isAtRight && e.touches[0].clientX < e.targetTouches[0].clientX)) {
        e.preventDefault();
      }
    };

    const element = scrollRef.current;
    element?.addEventListener('touchmove', handleTouchMove, { passive: false });

    return () => {
      element?.removeEventListener('touchmove', handleTouchMove);
    };
  }, []);

  return (
    <div 
      ref={scrollRef} 
      style={{ 
        overflowY: 'auto', 
        touchAction: 'pan-y',
        height: '300px' // 示例高度，根据实际场景调整
      }}
    >
      {/* 滚动内容 */}
    </div>
  );
};

export default ScrollableComponent;

原理：滚动到边缘时，浏览器会将触摸事件冒泡到父元素（包括根容器），触发页面弹性滑动。通过touchmove事件监听，在边缘滑动时阻止默认行为，即可避免根容器滑动出现空白。

针对问题2：全局禁用页面弹性滑动 #

推荐两种简便的全局处理方式：

方法1：利用CSS overscroll-behavior 属性 #

直接给根容器设置overscroll-behavior: none，该属性可阻止滚动溢出时的默认弹性滑动行为，且不影响组件内部的正常滚动：

html, body, #root {
  height: 100%;
  margin: 0;
  padding: 0;
  overscroll-behavior: none; /* 禁止所有方向的滚动溢出行为 */
}

该属性兼容性良好，支持绝大多数现代移动端浏览器（iOS Safari 13.1+、Android Chrome 63+），无需额外JS逻辑，是最优解。

方法2：全局CSS + 根容器事件拦截 #

如果需要兼容旧版浏览器，可采用此方案：

1. 全局CSS（如index.css）：

/* 根容器禁止所有触摸行为 */
#root {
  touch-action: none;
}

/* 给需要滚动的组件单独开启对应方向的触摸行为 */
.scrollable {
  touch-action: pan-y; /* 垂直滚动用pan-y，水平滚动用pan-x */
  overflow: auto;
}

2. 项目入口文件（如index.js）添加全局事件监听：

document.addEventListener('touchmove', (e) => {
  // 判断触发事件的元素是否为可滚动组件
  const isScrollable = e.target.closest('.scrollable');
  if (!isScrollable) {
    e.preventDefault();
  }
}, { passive: false });

内容的提问来源于stack exchange，提问作者mithderler