防止水平滚动页面导航

时间:2018-05-31 03:31:58

标签: javascript scroll mousewheel gestures trackpad

我正在使用mac触控板。如何阻止页面返回以及在水平滚动上访问过的页面旁边?

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

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

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

2 个答案:

答案 0 :(得分:11)

它与网页无关,也不与事件有关,这是特定的系统行为,我认为它不能在javascript级别被阻止。

如果要禁用它-转到:<ul class="main-nav js--main-nav"> <li id="menu"> <a href="#menu">Help&#x25BE;</a> <ul id="dropdown"> <li><a href="#">Give</a></li> <li><a href="#">Get Help</a></li> <li><a href="#">Get Involved</a></li> </ul> </li> </ul>并取消选中Apple Logo > Preferences > Trackpad > More gestures

  

//编辑

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

Swipe between pages

只需在OSX Chrome 67上进行了测试

答案 1 :(得分:0)

您可以使用CSS做到这一点。

html {
  overscroll-behavior-x: contain;
}

已针对Chrome here进行了记录。

  

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

在Chrome 77 OSX版上测试

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