![](/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.