且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

防止水平滚动页面导航

更新时间:2023-12-02 08:07:22

与网页及其事件无关.这是特定的系统行为,我认为无法从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