防止水平滚动页面导航

Question

我正在使用 Mac 触控板。如何防止页面在水平滚动时返回到已访问页面的旁边？

我尝试阻止轮子事件，但大多数时候都不起作用。

container.addEventListener('wheel', function(ev) {
    ev.preventDefault();
    ev.stopPropagation();
    return false;
}, {passive: false, capture: true});

甚至我尝试使用 mousewheel 事件进行阻止，这也会导致页面导航。

Answer 1

与网页及其事件无关；这是特定的系统行为，我认为不能从 JavaScript 级别阻止它。

如果您想禁用它 - 请转到：

Apple Logo > Preferences > Trackpad > More gestures

并取消选中

Swipe between pages

//编辑

好吧，我用谷歌搜索了一下，看来我错了 - 有一个解决方案，基本上非常简单：

document.body.addEventListener('mousewheel', function(e) {
  e.stopPropagation();
  var max = this.scrollWidth - this.offsetWidth; // this might change if you have dynamic content, perhaps some mutation observer will be useful here

  if (this.scrollLeft + e.deltaX < 0 || this.scrollLeft + e.deltaX > max) {
    e.preventDefault();
    this.scrollLeft = Math.max(0, Math.min(max, this.scrollLeft + e.deltaX));
  }
}, false);

刚刚在 OSX Chrome 67 上进行了测试

Answer 2

截至 2022 年，可以使用

overscroll-behaviour

CSS 属性在所有浏览器中进行管理：https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior

例如：

body {
  overscroll-behavior-x: contain;
}

或者，您可以将其仅应用在具有溢出滚动的单个元素上，允许在页面的其余部分中滑动导航，只是将其阻止在要滚动的部分中：

.someScrollingComponent {
  overflow: scroll;
  overscroll-behavior: contain;
}

MDN 文档描述了属性

contain

:

在设置此值的元素内观察到默认滚动溢出行为（例如“弹跳”效果）。然而，相邻滚动区域不会发生滚动链接；底层元素不会滚动。 包含值禁用本机浏览器导航，包括垂直拉动刷新手势和水平滑动导航。

（强调）