React中实现拖拽滚动元素功能失效求助（附代码）

你的拖拽滚动功能失效主要有几个核心问题，以下是具体原因和修复后的完整代码：

核心问题点 #

1. 事件绑定范围局限：原代码仅在目标div上绑定mousemove和mouseup，拖拽时鼠标移出div后事件会中断，导致滚动停止。
2. 状态存储失效：用普通let声明的pos在React函数组件每次渲染时都会被重置，丢失鼠标按下时的初始位置数据。
3. 滚动方向逻辑错误：原计算scrollTop和scrollLeft的公式方向相反，导致滚动行为与拖拽操作不符。
4. 未清理事件监听：未在鼠标抬起时移除全局事件，可能引发内存泄漏或异常触发。

修复后的完整代码 #

import { useRef } from 'react';

const DraggableScroll = () => {
  const scrollableDiv = useRef(null);
  // 用useRef持久化存储位置状态，避免渲染重置
  const pos = useRef({ top: 0, left: 0, x: 0, y: 0 });

  const onMouseMoveHandler = (e) => {
    if (!scrollableDiv.current) return;
    
    const dx = e.clientX - pos.current.x;
    const dy = e.clientY - pos.current.y;

    // 修正滚动方向：鼠标移动距离同步映射到滚动位置
    scrollableDiv.current.scrollTop = pos.current.top + dy;
    scrollableDiv.current.scrollLeft = pos.current.left + dx;
  };

  const onMouseUpHandler = () => {
    if (!scrollableDiv.current) return;
    
    scrollableDiv.current.style.cursor = "grab";
    scrollableDiv.current.style.removeProperty("user-select");
    // 清理全局事件监听，避免内存泄漏
    document.removeEventListener('mousemove', onMouseMoveHandler);
    document.removeEventListener('mouseup', onMouseUpHandler);
  };

  const onMouseDownHandler = (e) => {
    if (!scrollableDiv.current) return;
    
    pos.current = {
      left: scrollableDiv.current.scrollLeft,
      top: scrollableDiv.current.scrollTop,
      x: e.clientX,
      y: e.clientY,
    };

    scrollableDiv.current.style.cursor = "grabbing";
    scrollableDiv.current.style.userSelect = "none";
    // 将事件绑定到document，确保鼠标移出div时仍能触发
    document.addEventListener('mousemove', onMouseMoveHandler);
    document.addEventListener('mouseup', onMouseUpHandler);
  };

  return (
    <div 
      ref={scrollableDiv} 
      onMouseDown={onMouseDownHandler}
      style={{
        overflow: 'auto', // 必须开启滚动属性
        width: '400px', // 示例宽度，按需调整
        height: '300px', // 示例高度，按需调整
        border: '1px solid #eee'
      }}
    >
      {/* 内部内容尺寸必须超出容器，才会出现滚动条 */}
      <div style={{ width: '800px', height: '600px', padding: '20px' }}>
        拖拽我实现滚动<br/>
        测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容<br/>
        测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容<br/>
        测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容<br/>
      </div>
    </div>
  );
};

export default DraggableScroll;

关键修复说明 #

• 用useRef存储状态：useRef的.current属性在组件生命周期内保持不变，确保鼠标按下时的初始位置不会丢失。
• 全局事件绑定：将mousemove和mouseup绑定到document，保证拖拽过程中即使鼠标移出目标div，事件仍能正常触发。
• 修正滚动方向：调整滚动位置计算逻辑，使滚动方向与鼠标拖拽方向完全匹配（比如鼠标向下拖，内容向上滚动）。
• 清理事件监听：鼠标抬起时移除全局事件，避免不必要的资源占用和异常触发。
• 基础样式保障：确保目标div设置overflow: auto，且内部内容尺寸超出容器，否则滚动功能无法生效。

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