如何覆盖 window 中的滚动功能？

Question

如何在 JavaScript 中覆盖浏览器的滚动功能？

我能够找到的函数是 scroll、scrollBy 和 scrollTo（来自 window 对象）。但是，如果我尝试使用标准过程覆盖它们，就像任何其他函数一样，例如，通过执行以下代码 window.scroll = function(parameter){} 它不会对浏览器产生任何影响。因此，如果我在执行上述代码后尝试滚动页面（对于所有 3 种方法），window 仍然会滚动。

浏览器还有其他滚动功能吗？如果是这样，我应该覆盖哪个函数以获得自定义滚动行为？

我用的当然是GoogleChrome（最新版）[=16=]

Answer 1

window.scroll、window.scrollTo 和 window.scrollBy 方法不涉及本机滚动功能。它们用于滚动到网页上的特定位置。如果你想实现完全自定义的滚动 functionality/behaviour 你需要监听 wheel 事件，防止默认并定义你的自定义行为。

注意：将滚动更改为滚轮事件，因为注释提到错误

document.addEventListener("wheel", (event) => {
  event.preventDefault();
  event.stopPropagation();
  // now define custom functionality
}, { passive: false });

除了 window 之外，您还可以将它应用于页面上具有滚动条并因此可滚动的任何其他元素。
此外，wheel 事件具有 deltaX 和 deltaY 的值，因此您可以查看自上次滚动以来滚动了多少，并且您可以使用属性 x 和 y 来查看自开始以来滚动了多少。

Answer 2

使用 Javascript，我不确定如何完全阻止滚动，但您可以在他们尝试滚动后立即滚动到特定位置，如下所示：

document.addEventListener('scroll', function(event)
{
    event.preventDefault();
    event.stopPropagation();
    event.stopImmediatePropagation();
    window.scrollTo(0,0);
});

<h1>Try to Scroll</h1>
<ol>
  <li></li><li></li><li></li><li></li><li></li><li></li>
  <li></li><li></li><li></li><li></li><li></li><li></li>
  <li></li><li></li><li></li><li></li><li></li><li></li>
</ol>

请注意，尽管我尝试做到彻底，但您仍然可以看到在 window.scrollTo(0,0); 撤消它之前发生了一些滚动。

CSS

如果您只想防止滚动，则可以将 overflow: hidden 与 CSS 结合使用：

html,body { overflow: hidden; }

<h1>Try to Scroll</h1>
<ol>
    <li></li><li></li><li></li><li></li><li></li><li></li>
    <li></li><li></li><li></li><li></li><li></li><li></li>
    <li></li><li></li><li></li><li></li><li></li><li></li>
    <li></li><li></li><li></li><li></li><li></li><li></li>
    <li></li><li></li><li></li><li></li><li></li><li></li>
</ol>

如何覆盖 window 中的滚动功能？

How to override scroll functions in a window?

javascript

scroll

注意：将滚动更改为滚轮事件，因为注释提到错误