防止水平滚动页面导航

Posted 2023-04-13

【中文标题】防止水平滚动页面导航

【英文标题】：Prevent page navigation on horizontal scroll

【发布时间】：2018-11-09 23:45:35

【问题描述】：

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

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

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

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

【问题讨论】：

mvce ?

你是什么意思“水平滚动”？鼠标滚轮垂直滚动。您是指将方向盘向一侧或另一侧倾斜（某些鼠标支持）？如果是这样，请确保这些操作未在鼠标配置中映射到后退/前进（可能在制造商的应用程序或操作系统配置中）。

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

那么它与提示的滚轮相同 - 检查您的触控板软件或操作系统配置是否支持触控板手势。

如果您正在为用户构建一个面向公众的网站，您可能需要考虑覆盖他们的默认浏览器行为是否真正为他们服务，如果他们愿意，他们可以自行更改。

【参考方案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 上测试过

【讨论】：

它不起作用，我只想在一个容器上阻止滚动/滚轮。

所以不要传递document.body，而是传递你的元素，比如document.getElementById。你在哪里测试这个，浏览器版本？

是的，我是在容器上完成的。但它没有成功:(。浏览器：Chrome 67

这很奇怪，因为它适用于我，而且我使用 Chrome 67 在 osx 上工作，但尝试在上面的编辑中添加额外的 e.stopPropagation()，可能是冒泡问题

不，不工作。即使我在捕获阶段被阻止，我也尝试了所有可能的方法。它没有成功。我不知道我在这里做错了什么。

【参考方案2】：

你可以用 CSS 做到这一点。

html 
  overscroll-behavior-x: contain;

为 Chrome here 记录。

contain - 防止滚动链接。滚动不会传播到祖先，但会显示节点内的局部效果。例如，android 上的过度滚动发光效果或 ios 上的橡皮筋效果，当用户到达滚动边界时会通知用户。 注意：在 html 元素上使用 overscroll-behavior: contains 可防止过度滚动导航操作。

在 chrome 版本 77 OSX 上测试

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