如何防止拖拽到视口边缘时页面滚动（仅适配Firefox）

AI 小北

2026-6-17

解决Firefox拖拽到视口边缘时页面自动滚动的问题

针对你在userChrome.js脚本中遇到的需求，这里提供两种更优雅的原生方案，无需模拟滚动条容器：

方案1：事件捕获阶段拦截拖拽行为

之前调用event.preventDefault()无效，大概率是因为事件在冒泡阶段被页面其他监听器抢先处理了。改用捕获阶段监听，并同时阻止事件传播，就能优先拦截默认的拖拽滚动行为：

// 全局捕获dragover事件，优先拦截
document.addEventListener('dragover', (e) => {
  // 阻止浏览器默认的拖拽边缘滚动逻辑
  e.preventDefault();
  // 阻止同元素上其他监听器执行，避免冲突
  e.stopImmediatePropagation();
}, true);

// 补充拦截dragenter事件，覆盖完整拖拽流程
document.addEventListener('dragenter', (e) => {
  e.preventDefault();
  e.stopImmediatePropagation();
}, true);

方案2：利用CSS overscroll-behavior属性

Firefox支持overscroll-behavior属性，该属性可以直接控制滚动溢出时的行为，包括阻止拖拽触发的边缘滚动，同时保留滚动条和正常滚动功能：

你可以在userChrome.css中添加样式：

html {
  overscroll-behavior-y: contain !important;
}

或者在userChrome.js中动态注入样式：

const scrollBlockStyle = document.createElement('style');
scrollBlockStyle.textContent = `
  html {
    overscroll-behavior-y: contain !important;
  }
`;
document.head.appendChild(scrollBlockStyle);