如何通过鼠标抓取拖拽实现类触摸式滚动效果？

问题说明 #

你提供的示例中，移动端可通过触摸拖拽滚动#box，但桌面端仅支持滚轮或滚动条操作，想要实现桌面端鼠标按住左键抓取拖拽滚动的效果。

能否仅用CSS实现？ #

不能。CSS无法监听鼠标按下、移动、释放这类动态交互事件，必须借助JavaScript来处理拖拽逻辑。

实现代码（HTML+CSS+JavaScript） #

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    #box {
      background-color: red;
      width: 200px;
      height: 250px;
      overflow-x: hidden;
      overflow-y: scroll;
      cursor: grab;
      /* 防止拖拽时选中文字 */
      user-select: none;
    }
    #box.grabbing {
      cursor: grabbing;
    }
    #box div {
      background-color: blue;
      margin: 30px;
      width: 100px;
      height: 100px;
    }
  </style>
</head>
<body>
  <div id="box">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>

  <script>
    const box = document.getElementById('box');
    let isDragging = false;
    let startY;
    let scrollTopStart;

    // 鼠标按下事件
    box.addEventListener('mousedown', (e) => {
      isDragging = true;
      box.classList.add('grabbing');
      // 记录初始鼠标位置和容器初始滚动位置
      startY = e.pageY;
      scrollTopStart = box.scrollTop;
      // 阻止默认行为，避免选中内容或触发其他操作
      e.preventDefault();
    });

    // 鼠标移动事件
    document.addEventListener('mousemove', (e) => {
      if (!isDragging) return;
      // 计算鼠标移动的偏移量
      const deltaY = e.pageY - startY;
      // 更新容器的滚动位置
      box.scrollTop = scrollTopStart - deltaY;
    });

    // 鼠标释放事件（监听document，防止鼠标移出容器后无法停止拖拽）
    document.addEventListener('mouseup', () => {
      isDragging = false;
      box.classList.remove('grabbing');
    });

    // 鼠标移出窗口时也停止拖拽
    document.addEventListener('mouseleave', () => {
      isDragging = false;
      box.classList.remove('grabbing');
    });
  </script>
</body>
</html>

代码说明 #

• 监听mousedown事件：标记拖拽状态，记录初始鼠标位置和容器滚动位置，切换鼠标样式为grabbing。
• 监听mousemove事件：当处于拖拽状态时，计算鼠标移动的垂直偏移量，反向更新容器的scrollTop值（鼠标向下拖时容器内容向上滚动，反之亦然）。
• 监听mouseup和mouseleave事件：结束拖拽状态，恢复鼠标样式。
• 添加user-select: none防止拖拽过程中选中容器内的文本，提升交互体验。

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