javascript - 防止水平滚动页面导航

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

// EDIT

好吧，我在谷歌上搜索了一下，看来我错了 - 有一个解决方案，基本上很简单:

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 上测试过