防止水平滚动时页面导航

Question

我正在使用Mac触控板。如何防止水平滚动时页面返回到之前浏览过的页面？

我尝试了阻止滚轮事件，但大部分时间都不起作用。

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

甚至我尝试了使用鼠标滚轮事件来阻止页面导航。

- Prasanna Rkv

---

mvce 是什么？ - Jacob Goh

你说的“水平滚动”是什么意思？鼠标滚轮是垂直滚动的。你是指倾斜滚轮向左或向右滚动（某些鼠标支持）吗？如果是这样，请确保这些操作没有映射到鼠标配置中的后退/前进功能（可能在制造商的应用程序或操作系统配置中）。 - TheJim01

我正在使用Mac触控板进行滚动。@TheJim01 “水平滚动” - 我的意思是在x方向（左右）滚动。 - Prasanna Rkv

那么对于一个倾斜的轮子来说，操作方式是相同的——检查您的触控板软件或操作系统配置是否支持触控板手势。 - TheJim01

如果您正在为用户构建一个公共面向网站，您可能需要考虑是否覆盖其默认浏览器行为实际上对他们有所帮助，因为如果他们想要更改它，他们可以自己更改。 - Mark Fisher

Answer 1

这与网页或其事件无关，这是特定的系统行为，我认为它无法从javascript层面被阻止。

如果您想要禁用它 - 转到：苹果标志>偏好设置>触控板>更多手势并取消选中在页面之间滑动

// 编辑

好的，我搜索了一下，似乎我错了 - 有一种解决方案，基本上非常简单：

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上进行了测试

- Maciej Kwas

---

它没有起作用，我只想阻止在一个容器上滚动/滑轮滚动。 - Prasanna Rkv

是的，我在容器上做了这件事。但它没有成功 :(. 浏览器：Chrome 67 - Prasanna Rkv

不行，不起作用。我尝试了所有可能的方法，甚至在捕获阶段被卡住了。它没有成功。我不知道我在这里做错了什么。 - Prasanna Rkv

这是代码片段 https://codepen.io/PrasannaRkv/pen/pKqJaz 我正在使用MacBook的触摸板。即使我使用魔术鼠标或触控板，也会得到相同的结果。 - Prasanna Rkv

@PrasannaRkv 那支笔在Chrome和Macbook上都可以使用。请注意，自然情况下，光标必须位于灰色容器上，事件监听器才能阻止后退/前进手势——在容器外滚动和手势将正常工作。还有：你是否安装了任何第三方软件与手势混用（例如BetterTouchTool）？ - Jari Keinänen

Answer 2

你可以使用CSS来实现这一点。

html {
  overscroll-behavior-x: contain;
}

该功能在Chrome中进行了记录，请参考此处。

contain - 防止滚动链。 滚动不会传播到祖先节点，但节点内的局部效果将被显示。例如，在Android上的overscroll glow效果或iOS上的rubberbanding effect，它们会在用户到达滚动边界时通知用户。注意：在html元素上使用overscroll-behavior: contain将防止overscroll导航操作。

已在OSX上测试了Chrome版本77

注意：这仍然是一个非标准的CSS属性：https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior

- Charles Holbrow

---

将其设置在 html 上对我没有起作用，但是将其设置在 body 上就可以了。 - Busti

砰！添加此代码可以防止苹果魔术鼠标的滑动返回导航。 - SacWebDeveloper