如何使覆盖div仅响应滚动事件，其余指针事件穿透至下层元素？

针对你提出的「让上层滚动容器仅处理滚动事件，同时将其他鼠标事件（如文本选择）透传给下层元素」的需求，我们可以通过CSS指针事件控制 + JavaScript手动处理滚动交互的组合方案来实现，完美适配你类似P4Merge的差异化同步滚动场景。

核心思路 #

1. 利用pointer-events: none让上层覆盖容器默认透传所有指针事件到下层，保证下层元素能正常响应文本选择、点击等操作；
2. 通过JavaScript手动接管滚动相关的交互（滚轮+自定义滚动条），以此控制上层容器的滚动，再通过自定义逻辑同步下层两个内容容器的滚动位置。

具体实现步骤 #

1. 调整CSS样式 #

首先修改样式，让覆盖容器透传事件，同时隐藏原生滚动条，添加自定义滚动条的样式：

body { overflow-y: hidden; }
.app { overflow-y: hidden; position: relative; display: flex; flex-direction: row; z-index: 0; }

/* 上层覆盖容器：透传所有事件，隐藏原生滚动条 */
.scrollable-container {
  width: 100vw;
  height: 100vh;
  z-index: 10;
  position: absolute;
  overflow-y: scroll;
  pointer-events: none; /* 关键：所有事件透传给下层 */
  /* 隐藏原生滚动条 */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}
.scrollable-container::-webkit-scrollbar { display: none; /* Chrome/Safari */ }

.scrollable-content { width: 500px; height: 1600px; }

.non-scrollable-container { flex: 1; height: 100vh; overflow-y: hidden; }
.bridge { width: 40px; background: linear-gradient(white, black); cursor: ew-resize; height: 100vh; }
#original { background: linear-gradient(red, yellow); height: 2100px; }
#modified { background: linear-gradient(blue, green); height: 1600px; }

/* 自定义滚动条：确保能响应鼠标事件 */
.custom-scrollbar {
  position: fixed;
  right: 0;
  top: 0;
  width: 12px;
  height: 100vh;
  background-color: rgba(0,0,0,0.1);
  pointer-events: auto; /* 关键：滚动条可交互 */
  z-index: 11;
}
.custom-scrollbar-thumb {
  width: 100%;
  background-color: rgba(0,0,0,0.3);
  border-radius: 6px;
  cursor: grab;
}
.custom-scrollbar-thumb:active { cursor: grabbing; }

2. React逻辑实现 #

接下来编写React代码，处理滚轮事件、自定义滚动条拖动，以及差异化同步滚动的逻辑：

import { useEffect, useRef, useState } from 'react';

function DiffViewer() {
  const scrollContainerRef = useRef(null);
  const originalRef = useRef(null);
  const modifiedRef = useRef(null);
  const scrollbarThumbRef = useRef(null);
  const [isDragging, setIsDragging] = useState(false);

  // 计算自定义滚动条thumb的高度
  const getThumbHeight = () => {
    if (!scrollContainerRef.current) return 0;
    const containerHeight = scrollContainerRef.current.clientHeight;
    const contentHeight = scrollContainerRef.current.scrollHeight;
    return (containerHeight / contentHeight) * containerHeight;
  };

  // 更新滚动条thumb的位置
  const updateScrollbarPosition = () => {
    if (!scrollContainerRef.current || !scrollbarThumbRef.current) return;
    const containerHeight = scrollContainerRef.current.clientHeight;
    const contentHeight = scrollContainerRef.current.scrollHeight;
    const scrollTop = scrollContainerRef.current.scrollTop;
    const thumbTop = (scrollTop / (contentHeight - containerHeight)) * (containerHeight - getThumbHeight());
    scrollbarThumbRef.current.style.top = `${thumbTop}px`;
  };

  // 自定义差异化同步滚动逻辑（可根据你的需求调整）
  const syncScroll = () => {
    if (!scrollContainerRef.current || !originalRef.current || !modifiedRef.current) return;
    const scrollTop = scrollContainerRef.current.scrollTop;
    
    // 示例：根据两个内容容器的高度比例，计算各自的滚动位置
    const originalRatio = originalRef.current.scrollHeight / scrollContainerRef.current.scrollHeight;
    const modifiedRatio = modifiedRef.current.scrollHeight / scrollContainerRef.current.scrollHeight;
    
    originalRef.current.scrollTop = scrollTop * originalRatio;
    modifiedRef.current.scrollTop = scrollTop * modifiedRatio;
  };

  useEffect(() => {
    const scrollContainer = scrollContainerRef.current;
    if (!scrollContainer) return;

    // 监听覆盖容器的滚动，同步下层容器
    const handleScroll = () => {
      syncScroll();
      updateScrollbarPosition();
    };
    scrollContainer.addEventListener('scroll', handleScroll);

    // 监听全局滚轮事件，控制覆盖容器滚动
    const handleWheel = (e) => {
      if (!scrollContainer) return;
      scrollContainer.scrollTop += e.deltaY;
      e.preventDefault(); // 避免页面整体滚动
    };
    document.addEventListener('wheel', handleWheel);

    // 自定义滚动条拖动逻辑
    const handleMouseDown = (e) => {
      setIsDragging(true);
      e.preventDefault();
    };
    const handleMouseUp = () => setIsDragging(false);
    const handleMouseMove = (e) => {
      if (!isDragging || !scrollContainer || !scrollbarThumbRef.current) return;
      const containerHeight = scrollContainer.clientHeight;
      const contentHeight = scrollContainer.scrollHeight;
      const thumbHeight = getThumbHeight();
      // 计算鼠标位置对应的滚动距离
      const maxTop = containerHeight - thumbHeight;
      const mouseTop = e.clientY;
      const thumbTop = Math.max(0, Math.min(maxTop, mouseTop - thumbHeight / 2));
      const scrollTop = (thumbTop / maxTop) * (contentHeight - containerHeight);
      scrollContainer.scrollTop = scrollTop;
    };

    scrollbarThumbRef.current?.addEventListener('mousedown', handleMouseDown);
    document.addEventListener('mouseup', handleMouseUp);
    document.addEventListener('mousemove', handleMouseMove);

    // 初始化滚动条thumb高度
    if (scrollbarThumbRef.current) {
      scrollbarThumbRef.current.style.height = `${getThumbHeight()}px`;
    }

    // 清理事件监听
    return () => {
      scrollContainer.removeEventListener('scroll', handleScroll);
      document.removeEventListener('wheel', handleWheel);
      scrollbarThumbRef.current?.removeEventListener('mousedown', handleMouseDown);
      document.removeEventListener('mouseup', handleMouseUp);
      document.removeEventListener('mousemove', handleMouseMove);
    };
  }, [isDragging]);

  return (
    <div className="app">
      <div className="scrollable-container" ref={scrollContainerRef}>
        <div className="scrollable-content"></div>
      </div>
      <div className="non-scrollable-container">
        <div id="original" className="codeBlock" ref={originalRef}>
          Content I want to select
        </div>
      </div>
      <div className="bridge"></div>
      <div className="non-scrollable-container">
        <div id="modified" className="codeBlock" ref={modifiedRef}>
          Content I want to select
        </div>
      </div>
      {/* 自定义滚动条 */}
      <div className="custom-scrollbar">
        <div className="custom-scrollbar-thumb" ref={scrollbarThumbRef}></div>
      </div>
    </div>
  );
}

export default DiffViewer;

关键说明 #

• pointer-events: none是核心：它让上层覆盖容器不会拦截任何鼠标事件，下层元素可以正常进行文本选择、点击等操作；
• 自定义滚动条解决了原生滚动条因pointer-events: none无法拖动的问题，同时保持了熟悉的滚动交互体验；
• syncScroll函数可以完全自定义：你可以根据内容的增删情况，调整两个下层容器的滚动速度、是否同步滚动，完全复刻P4Merge的diff工具逻辑。

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