我之前也碰到过类似的自定义拖拽场景下页面不自动滚动的问题，结合你的描述来看，问题的核心其实很清晰：

问题原因 #

HTML5原生的拖拽API自带了拖拽时靠近视口边缘自动滚动页面的特性，但如果你的拖拽功能是通过**自定义鼠标事件（mousedown/mousemove/mouseup）**实现的，浏览器就不会触发这个内置的自动滚动行为。你提到用箭头键能正常滚动，这正好说明不是overflow属性的问题——箭头键触发的是浏览器默认的滚动逻辑，和自定义拖拽事件完全独立。

解决方案：手动模拟自动滚动 #

我们可以通过监听拖拽过程中的鼠标位置，判断是否接近视口边缘，然后主动触发页面滚动来解决这个问题。具体步骤如下：

1. 定义滚动参数：设置触发滚动的边缘距离和滚动速度，根据需求调整数值
2. 在拖拽移动时监听鼠标位置：判断是否需要触发滚动，用定时器持续执行滚动操作
3. 拖拽结束时停止滚动：清除定时器，避免拖拽结束后页面还继续滚动

给你一个适配到你代码里的示例：

// 滚动配置参数
const scrollTriggerThreshold = 25; // 距离视口边缘多少像素开始滚动
const scrollStep = 6; // 每次滚动的距离，控制速度
let activeScrollInterval = null;

// 在你的拖拽开始（mousedown）逻辑之后，添加mousemove监听
document.addEventListener('mousemove', handleDragScroll);

// 在拖拽结束（mouseup）逻辑里移除监听并清除定时器
document.addEventListener('mouseup', () => {
  clearInterval(activeScrollInterval);
  document.removeEventListener('mousemove', handleDragScroll);
});

function handleDragScroll(e) {
  // 先清除之前的滚动定时器，避免多个定时器叠加
  clearInterval(activeScrollInterval);

  // 检测是否靠近视口顶部边缘
  if (e.clientY <= scrollTriggerThreshold) {
    activeScrollInterval = setInterval(() => {
      window.scrollBy(0, -scrollStep);
    }, 16); // 16ms约等于60fps，保证滚动流畅
  }
  // 检测是否靠近视口底部边缘
  else if (e.clientY >= window.innerHeight - scrollTriggerThreshold) {
    activeScrollInterval = setInterval(() => {
      window.scrollBy(0, scrollStep);
    }, 16);
  }
}

额外注意事项 #

• 如果你的拖拽容器不是整个窗口，而是某个内部容器，只需要把window换成对应的容器元素，调整scrollTop或者使用element.scrollBy()即可。
• 可以根据实际体验调整scrollTriggerThreshold和scrollStep的数值，找到最舒适的滚动速度。
• 确保在拖拽开始时才添加mousemove监听，拖拽结束后移除，避免影响页面其他交互。

这样处理后，当你拖拽术语靠近页面底部边缘时，页面就会自动向下滚动，保证内容始终可访问啦。

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