在视口边缘拖动时如何防止页面滚动

Question

将内容拖动到溢出页面的边缘时，页面将开始滚动。如何通过本机浏览器功能/样式来防止这种行为？仅在 Firefox 上工作是可以的。 （我正在编写一些 userChrome.js 脚本）

例如，打开www.wikipedia.org，当出现垂直滚动条（整个页面大小大于视口，又称溢出）时，如果您将文件从桌面、文件夹或其他任何位置拖到顶部或视口的底部边缘，页面将开始滚动。我想阻止这种情况发生。

我尝试在

event.preventDefault()

事件上调用

dragover

，但不起作用。使用

overflow:hidden

可以阻止它，但我需要页面可滚动（至少在视觉上）。我正在考虑创建一个宽度为 0 但只有滚动条的框，然后同步它们的滚动行为来欺骗用户，但我想知道是否有一种优雅的方法。

Answer 1

解决方案 1：在拖动事件上使用 event.preventDefault() 添加事件监听器以防止浏览器在拖动操作期间处理默认滚动行为。

// Disable scrolling when dragging
document.addEventListener('dragover', (event) => {
   event.preventDefault();
}, { passive: false });

document.addEventListener('drop', (event) => {
   event.preventDefault();
});

解决方案2：设置overflow:hidden 当拖动操作开始时，您可以通过在body上设置overflow:hidden来禁用滚动。

// Disable scrolling on drag start
document.addEventListener('dragstart', () => {
  document.body.style.overflow = 'hidden';
});

// Enable scrolling again on drag end
document.addEventListener('dragend', () => {
  document.body.style.overflow = '';
});