如何控制textarea边缘选中文本时的滚动速度？

原生textarea的自动滚动速度由浏览器控制，无法通过CSS直接修改，我们可以通过JavaScript自定义滚动逻辑来实现慢速滚动：

实现思路 #

1. 监听鼠标拖动事件，拦截原生的边缘滚动行为
2. 检测鼠标是否处于textarea的顶部/底部边缘区域
3. 用定时器控制滚动步长，实现慢速滚动，同时同步更新文本选区

完整代码示例 #

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      height: 2000px;
      padding: 20px;
    }
    textarea {
      width: 500px;
      height: 150px;
      resize: vertical;
    }
  </style>
</head>
<body>
  <h2>尝试只选中一行文本：</h2>
  <textarea id="slowScrollTextarea">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro quidem magnam corporis itaque sit cupiditate voluptate esse. Voluptatibus ratione sit id doloribus unde dolor repellat sint. Laudantium blanditiis architecto exercitationem. Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro quidem magnam corporis itaque sit cupiditate voluptate esse. Voluptatibus ratione sit id doloribus unde dolor repellat sint. Laudantium blanditiis architecto exercitationem.</textarea>

  <script>
    const textarea = document.getElementById('slowScrollTextarea');
    let scrollInterval = null;
    let isDragging = false;
    const EDGE_THRESHOLD = 10; // 边缘触发区域的高度（px）
    const SCROLL_STEP = 2; // 每次滚动的步长（px），值越小速度越慢
    const SCROLL_INTERVAL = 50; // 滚动间隔（ms），值越大速度越慢

    // 标记开始拖动选区
    textarea.addEventListener('mousedown', () => {
      isDragging = true;
    });

    // 处理拖动时的鼠标移动
    textarea.addEventListener('mousemove', (e) => {
      if (!isDragging) return;

      const rect = textarea.getBoundingClientRect();
      const mouseY = e.clientY - rect.top;

      // 清除之前的滚动定时器
      if (scrollInterval) {
        clearInterval(scrollInterval);
        scrollInterval = null;
      }

      // 鼠标在底部边缘，向下滚动并扩展选区
      if (mouseY >= rect.height - EDGE_THRESHOLD) {
        scrollInterval = setInterval(() => {
          textarea.scrollTop += SCROLL_STEP;
          const selection = window.getSelection();
          if (selection.rangeCount > 0) {
            const range = selection.getRangeAt(0);
            range.setEnd(textarea.firstChild, textarea.value.length);
            selection.removeAllRanges();
            selection.addRange(range);
          }
        }, SCROLL_INTERVAL);
      }
      // 鼠标在顶部边缘，向上滚动并扩展选区
      else if (mouseY <= EDGE_THRESHOLD) {
        scrollInterval = setInterval(() => {
          textarea.scrollTop -= SCROLL_STEP;
          const selection = window.getSelection();
          if (selection.rangeCount > 0) {
            const range = selection.getRangeAt(0);
            range.setStart(textarea.firstChild, 0);
            selection.removeAllRanges();
            selection.addRange(range);
          }
        }, SCROLL_INTERVAL);
      }
    });

    // 停止滚动的统一处理
    const stopScroll = () => {
      isDragging = false;
      if (scrollInterval) {
        clearInterval(scrollInterval);
        scrollInterval = null;
      }
    };

    textarea.addEventListener('mouseup', stopScroll);
    textarea.addEventListener('mouseleave', stopScroll);
  </script>
</body>
</html>

关键参数说明 #

• EDGE_THRESHOLD：触发滚动的边缘区域高度，可根据需求调整
• SCROLL_STEP：每次滚动的像素数，值越小滚动越慢
• SCROLL_INTERVAL：滚动的时间间隔，值越大滚动越慢

注意事项 #

• 确保textarea内的文本为直接子节点，避免嵌套其他元素导致选区逻辑异常
• 不同浏览器的Selection API行为略有差异，若出现选区异常，可微调选区更新的逻辑

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