防止水平滚动页面导航 [英] Prevent page navigation on horizontal scroll

问题描述

我使用的是Mac触控板.如何在水平滚动时防止页面回退和访问的页面旁边?

I am using a mac trackpad.How to prevent the page going back and next to visited pages on horizontal scroll ?.

我试图防止车轮事件，但是在大多数情况下都无效.

I tried to prevent the wheel events but it doesn't works most of the time.

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

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

even I tried blocking with mousewheel event which also leads to page navigation.

推荐答案

与网页及其事件无关.这是特定的系统行为，我认为无法从javascript级别阻止它.

It has nothing to do with a webpage nor its events; this is specific system behavior and I don't think it can be blocked from javascript level.

如果要禁用它-转到:Apple Logo > Preferences > Trackpad > More gestures并取消选中Swipe between pages

If you want to disable it - go to: Apple Logo > Preferences > Trackpad > More gestures and uncheck Swipe between pages

//编辑

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

Ok, I googled a bit and it seems I was wrong- there is a solution to that and basically is pretty simple:

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

Just tested this on OSX Chrome 67

这篇关于防止水平滚动页面导航的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！