如何防止用户拖动滚动条移动页面？答案

【问题标题】：How prevent user dragging scrollbar from moving the page?如何防止用户拖动滚动条移动页面？
【发布时间】：2017-01-10 19:15:28
【问题描述】：

我不想删除滚动条。我希望它在那里表明还有更多要滚动的内容，但即使他们拖动滚动条，我也想阻止页面表单移动（直到发生特定事件）。我该怎么做？

这不起作用：

/* This does NOT stop the page form moving when the drag the scrollbar */
document.addEventListener( "scroll", function(event) {
     console.log( "scrolled");
     event.preventDefault(); 
     event.stopPropagation();
     return false;
  },
  false
);

https://jsfiddle.net/4atyw01h/

【问题讨论】：

标签： javascript html events scroll dom-events

【解决方案1】：

刚刚发现了一个可能的答案（它有效）：除了防止默认传播，您还需要将元素的scrollTop 设置为 0（或任何您想要锁定它的位置）：

document.addEventListener( "scroll", function(event) {
     console.log( "scrolled");
     event.preventDefault(); 
     event.stopPropagation();

     //This stops it
     document.body.scrollTop = 0;

     return false;
  },
  false
);

https://jsfiddle.net/4atyw01h/1/

【讨论】：

【解决方案2】：

无需调用event.preventDefault() 和event.stopPropagation() 方法。 document.body.scrollTop = 0 分配就足够了。调用window.scrollTo(0, 0) 以防止滚动整个文档。我在 Chrome 中测试过。

【讨论】：