拖拽时如何预判滚动即将触发？

目前浏览器没有原生的will-scroll事件，也不存在可直接配置的auto-scroll-offset属性，但可以通过以下几种方法预判自动滚动的触发时机：

1. 监听鼠标位置，自定义阈值预判 #

拖拽过程中实时监听鼠标移动，计算鼠标与视口顶部/底部的距离，当距离小于你自定义的阈值（模拟原生自动滚动的触发范围）时，即可判定即将触发自动滚动，提前执行操作。

示例代码：

// 自定义触发阈值（可根据测试调整，匹配原生行为）
const AUTO_SCROLL_THRESHOLD = 50;
let isDragging = false;

// 标记拖拽状态
document.querySelector('.draggable').addEventListener('dragstart', () => {
  isDragging = true;
});

document.querySelector('.draggable').addEventListener('dragend', () => {
  isDragging = false;
});

// 实时监听鼠标位置
document.addEventListener('mousemove', (e) => {
  if (!isDragging) return;

  const mouseY = e.clientY;
  const viewportHeight = window.innerHeight;

  // 接近视口顶部
  if (mouseY <= AUTO_SCROLL_THRESHOLD) {
    // 执行滚动前的操作
    console.log('即将触发顶部自动滚动，提前处理');
  }
  // 接近视口底部
  if (mouseY >= viewportHeight - AUTO_SCROLL_THRESHOLD) {
    // 执行滚动前的操作
    console.log('即将触发底部自动滚动，提前处理');
  }
});

不同浏览器的原生自动滚动阈值略有差异，你可以通过实际测试调整AUTO_SCROLL_THRESHOLD的值，让预判时机更贴合原生体验。

2. 禁用原生滚动，手动实现全控制 #

如果需要绝对精准的触发时机，可以直接禁用原生自动滚动，完全自定义拖拽时的滚动逻辑：

• 在dragover事件中调用event.preventDefault()，阻止原生自动滚动行为
• 基于鼠标位置判断是否需要滚动，先执行前置操作，再通过window.scrollBy()手动触发滚动

这种方式能让你完全掌控滚动的触发时机和节奏，避免原生行为的不确定性。

3. 借助拖拽专属事件判断 #

除了mousemove，还可以在dragover事件中获取鼠标位置进行判断——dragover会在拖拽元素持续悬停时触发，更聚焦于拖拽场景，逻辑和监听mousemove一致，但能减少非拖拽场景的无效判断。

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