13

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

我试图阻止车轮事件，但它在大多数情况下都不起作用。

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

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

4

2 回答 2

16

它与网页或其事件无关；这是特定的系统行为，我认为不能从 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 上测试过

于 2018-06-23T07:16:28.043 回答
7

你可以用 CSS 做到这一点。

html {
  overscroll-behavior-x: contain;
}

在此处为 Chrome 记录。

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

在 chrome 版本 77 OSX 上测试

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

于 2019-10-21T20:40:16.870 回答