![](/img/trans.png)
[英]In iOS 7 Safari, how do you differentiate popstate events via edge swipe vs. the back/fwd buttons?
[英]Is there a a way to disable swipe back animation in Safari on iOS?
我想在 SPA 上完全禁用向后滑动 animation。 这将允许我在 SPA 中使用一些滑动手势。 目前在 iOS 上,您往往在触发某些手势时也会触发向后滑动的手势。
我找到了关于如何禁用它的前一篇文章: iOS 7 - 有没有办法禁用 Safari 中的前后滑动功能?
他们建议如下:
1) CSS 仅修复 Chrome/Firefox
html, body {
overscroll-behavior-x: none;
}
2) JavaScript 修复 Safari
if (window.safari) {
history.pushState(null, null, location.href);
window.onpopstate = function(event) {
history.go(1);
};
}
问题是它不会停用 iOS 上的向后滑动 animation,它只是替换了您重定向到的位置。 有没有办法在 iOS 上也禁用向后滑动 animation? 如果没有办法做到这一点,那是否意味着如果您打算拥有 iOS 个客户,那么如果您构建 PWA 就不能真正使用任何滑动手势?
在 iOS 13.4+ 中,您现在可以在"touchstart"
开始事件上preventDefault()
以停止导航操作。
假设我们在页面上有一个<div class="block-swipe-nav">
跨越视口的整个宽度,并且我们想要防止在该元素上滑动导航。
const element = document.querySelector('.block-swipe-nav');
element.addEventListener('touchstart', (e) => {
// is not near edge of view, exit
if (e.pageX > 10 && e.pageX < window.innerWidth - 10) return;
// prevent swipe to navigate gesture
e.preventDefault();
});
我写了一篇关于阻止滑动的简短文章,其中包含一些附加信息。
默认情况下,无法禁用向后滑动手势。 此外,当您在新选项卡中打开 URL 时,后退按钮和向左滑动手势会将您重定向到上一页。
当您没有后退按钮时,有一种方法:当您在 Safari 中打开一个新选项卡并转到 URL 时,没有可以返回的 URL...
我发现了一个小技巧,可以在代码中实现这一点。 当 Safari 不再找到引用者时,后退按钮将消失并且后退手势不再起作用:)
在新选项卡中打开新页面是您唯一需要做的事情,例如下面的代码:
<a href="https://yoururl.com/path" target="_blank" onclick="handleClick()">Click here to open</a>
function handleClick() {
setTimeout(function () {
window.location.href = '?changeThePath';
}, 100);
}
您需要更改原始 URL,但用户看不到它,因为新页面已加载到新选项卡中 :)
document.body.addEventListener('click', function(evt) {
const a = evt.target.closest('a:not([href^="#"])');
if (!a) { return; }
evt.preventDefault();
history.replaceState({ }, '', a.href);
location.reload();
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.