我想禁用双指划动,在Chrome中导致返回或前进。
我有一个网站,用户如果没有特别保存,可能会丢失他的工作进度。
我尝试使用window.onbeforeunload
,但如果我在URL中使用哈希标记(向后和向前将在 www.example.com/work/#step1#unsaved www.example.com/work/#step0 之间切换),则似乎无效,并且事件似乎不会触发。
我本来打算转到另一个解决方案,但今天我注意到在Google文档中完全被禁用了。他们是如何实现的?
我想禁用双指划动,在Chrome中导致返回或前进。
我有一个网站,用户如果没有特别保存,可能会丢失他的工作进度。
我尝试使用window.onbeforeunload
,但如果我在URL中使用哈希标记(向后和向前将在 www.example.com/work/#step1#unsaved www.example.com/work/#step0 之间切换),则似乎无效,并且事件似乎不会触发。
我本来打算转到另一个解决方案,但今天我注意到在Google文档中完全被禁用了。他们是如何实现的?
html
元素上指定overscroll-behavior-x
。 - Matt Sanders<canvas>
,你可以使用 addEventListener('mouseenter'/'mouseleave'
并在 <html>
上附加/删除类。 - Noble Dinasaur通过在超链接中加入target="_blank">,使特定页面默认在新标签页或窗口中打开。这样就不会有之前的页面可以返回。
或者默认情况下禁止水平滚动。为了做到这一点,你可以使用jquery.mousewheel进行操作:
$(document).on("mousewheel",function(event,delta){
// prevent horizontal scrolling
if (event.originalEvent.wheelDeltaX !== 0) {
event.preventDefault();
}
});
overscroll-behavior-x: contain;
是最简单的方法,以防止滚动操作溢出到页面并导致导航问题。html
标签上而不是可滚动容器上时,它可以工作。 - Matej Kormuth禁用或替换 Google Chrome 61 中的滑动手势
导致我来到这里的问题被标记为“重复”并关闭了答案。我认为这个答案更适合“重复”的问题,但我觉得这个答案可能会为着陆在任何一个问题上的人节省时间。
更好的问题: 在javascript中禁用Chrome浏览器上的导航滑动手势
这篇Google开发者文章帮助我允许e.preventDefault()工作并防止Chrome 61中的滑动手势。
https://developers.google.com/web/updates/2017/01/scrolling-intervention
givanse的回答是我用来编写自己的滑动事件处理程序的代码:
在iPhone和Android上通过JavaScript检测手指滑动
总之,以下两个事件用于实现滑动手势:
handleTouchStart (e) {
...
},
handleTouchMove (e) {
...
e.preventDefault()
}
从Chrome 56开始,事件监听器的默认行为是将其设置为被动模式,因此禁用了阻止Chrome滑动手势的能力。要覆盖此行为,可以按以下方式添加事件监听器:
document.addEventListener(
'touchstart',
this.handleTouchStart,
{passive: false}
)
document.addEventListener(
'touchmove',
this.handleTouchMove,
{passive: false}
)
我一直在做类似的工作,想要覆盖前进/后退历史滑动手势。根据您的滑动区域,您可以按照以下方式调整选择器:
html { touch-action:none; }
在之前@roy riojas和@redgetan提供的答案基础上,我将他们的答案结合起来,使其具有动态性并且可以防止前后滚动。根据@roy的评论,你必须知道元素的类,对于这个实现来说,是实际被滚动的嵌套元素的类。
(function ($) {
$(document).on('mousewheel', function(e) {
var $target = $(e.target).closest('.scrollable-h');
var scroll = $target.scrollLeft();
var maxScroll = $target.find('.scrollable-h-content').width() - $target.width();
if(scroll <= 0) {
if(scroll <= 0 && e.originalEvent.wheelDeltaX >= 0) {
e.preventDefault();
}
}
if(scroll >= maxScroll) {
if (scroll >1 && e.originalEvent.wheelDeltaX <= 0) {
e.preventDefault();
}
}
});}(jQuery));
document.addEventListener("wheel", function(event) {
event.preventDefault();
}, { passive: false });
document.addEventListener("wheel", function(event) {
if ($(event.target).closest('.disable-back-forward').length)
event.preventDefault();
}, { passive: false });
嗨,这对我在Chrome上有用,但并非整个页面,而是适用于我具有可滚动内容的地方。
在Google文档(电子表格)中,它似乎有效,因为它们没有可以返回的后退页面。如果您手动导航到另一个URL,则不会阻止您返回。
$(document).on('mousewheel', function(e) {
var $target = $(e.target).closest('.scrollable-h');
if ($target.scrollLeft () <= 4) {
$target.scrollLeft(5);
return false;
}
});
需要注意的一件事是上面的代码做了两个假设:
重要提示: - 这仅会防止后向轻扫手势,如果您快速执行此操作,则仍会触发。
您可以在这里查看概念验证。 http://jsfiddle.net/royriojas/JVA6m/#base
wheel
事件上的preventDefault
对我无效。但是当我注意到你评论中的“bounce”一词时,突然意识到问题所在。我在事件处理程序上使用了_.throttle
,这破坏了preventDefault
。虽然这与原始问题无关,但还是要感谢你! - jastkanddisable-features=OverscrollHistoryNavigation
运行chromium
/ chrome
:# Run Chromium or Chrome with following flag
chromium --disable-features=OverscrollHistoryNavigation
--disable-pinch
),可以在这里找到:https://niek.github.io/chrome-features/,这是官方文档推荐的博客文章(在这里,底部)。
onhashchange
事件来检测滑动尝试更改哈希值吗? - Barmar