无法完全禁用双指滑动手势来浏览整个网站的浏览器历史记录,这对我来说是一个永恒的烦恼。直到这一点,至少可以通过在mousewheel事件上调用preventDefault()来阻止该行为。无法阻止最新的Chrome版本(59)在Mac上导航手势
这似乎并不被在Chrome中工作了59
下面是如何重现它:
- 开始手势某处在页面上,然后取消
- 从那里,preventDefault无效。
有没有人有解决这个问题?
例子
Zenkit和Airtable当你自己的表视图内滚动两个呼叫的preventDefault。它似乎一开始工作,但只要手势被识别,然后取消至少一次(在桌子外面,防止默认未被调用),防止手势不再工作(甚至在桌子内)。所以从那里开始,滚动到表格左侧几乎是不可能的,因为它总是触发手势。
在Trello的看板视图中,只有在您位于滚动条的左侧或右侧时才会出现。但我想这是因为他们使用本地滚动,而Zenkit和Airtable使用CSS转换。
我试图在用户开始滚动并在之后将其删除后在内容顶部创建一个隐形滚动容器。这显着减少了问题,但在所有情况下都不起作用。
例如代码: https://codepen.io/anon/pen/gRKaMX
有在此笔3盒。
第一个使用overflow滚动本地滚动:滚动。这里的手势只能在scrollLeft为0时触发。
第二个有附加的事件监听器,它在每个mousewheel事件上调用preventDefault。这首先会阻止手势,但一旦您在页面上的其他任何位置启动它,它就不再起作用。
最后还有第三个div,您可以随时启动手势。
的StackOverflow要我内联的代码一样,所以在这里它是:
HTML:
Native Scrolling:
<div id="native-scrolling" class="box">
<div></div>
</div>
Prevent gesture by calling prevent default. Only works if you didn't start the gesture anywhere else, yet:
<div id="prevent-gesture" class="box"></div>
Just a normal div:
<div class="box"></div>
的JavaScript:
$('#prevent-gesture').on('mousewheel', function (event) {
event.preventDefault();
});
CSS:
.box {
height: 100px;
width: 200px;
background: black;
}
#native-scrolling {
overflow: scroll;
}
#native-scrolling > div {
width: 200%;
height: 10px;
}
在此先感谢, 杰西
重新启动我的电脑实际上修复了它... – Jesse
请告诉我你是在开玩笑。编辑:OMG重新启动chrome真的解决了这个问题 – Dogoku