停止Chrome後退/前進兩根手指滑動

我想禁用導致Chrome返回或前進的兩根手指滑動。我有一個網站，用戶可能會失去他的工作進展，如果他沒有特別保存。停止Chrome後退/前進兩根手指滑動

我嘗試過使用window.onbeforeunload，但如果我在網址中有哈希值，這似乎不起作用（後退將在www.example.com/work/#step1#unsaved www.example.com/work/ ＃step0）並且事件似乎沒有觸發。

我正要切換到另一個解決方案，但今天我發現在Google文檔中它已完全禁用。他們是如何做到的？

來源

2013-04-05 andrei

window.onbeforeunload需要同步任務。也許這是這種方法的問題。 – 2013-04-08 09:08:29

你可以使用'onhashchange'事件來檢測一次刷卡什麼時候嘗試改變hasn？ – Barmar 2013-04-14 03:03:31

您正在查看錯誤級別的問題。 OnBeforeUnload只是沒有被觸發，因爲沒有任何東西從瀏覽器的角度被卸載。因此，您直言不諱地實現了版本控制的錯誤機制 - 片段用於頁面狀態，而不是您現在使用的文檔狀態。

如果您堅持通過散列碎片維護狀態，則需要使用其他機制來防止頁面狀態發生變化。由於目前所有瀏覽器都支持LocalStorage，因此我會使用它。而且，在它的同時，將所有文檔狀態數據放在那裏，而不是放在URL中，因爲這就是Google Docs的功能，這就是爲什麼他們沒有這個問題。

來源

2013-04-12 19:50:57

我已經發現'onbeforeunload'不工作「我嘗試使用window.onbeforeunload但似乎不工作「 – andrei 2013-04-13 09:08:14

嗨，這對我的工作在鉻上，但不是整個頁面，但對於我有可滾動內容的地方。

在谷歌文檔（電子表格），它似乎工作，因爲他們沒有一個後臺頁面去。如果您導航到另一個網址（手動），它不會阻止您返回。

$(document).on('mousewheel', function(e) { 
    var $target = $(e.target).closest('.scrollable-h'); 
    if ($target.scrollLeft() <= 4) { 
    $target.scrollLeft(5); 
    return false; 
    } 
});

有一點要記住的是，上面的代碼做兩個假設：

與水平滾動內容的元素有一類滾動小時
如果檢查的scrollLeft如果大於小於4px然後只是滾動到5px 返回false有效取消後退手勢

重要提示： - 這樣做只能防止背部輕掃手勢，快速完成時，如果速度非常慢，有時仍會觸發。

此外，這並不阻止向前滑動手勢，但它也可以通過檢查元素是否已達到最大scrollLeft來完成。如果是這種情況，那麼將其移回20px並返回false以防止事件發生......如果它恰好對您有意義，您可以添加此用例。

你可以看看這裏的概念證明。 http://jsfiddle.net/royriojas/JVA6m/#base

來源

2013-04-09 22:39:02

那麼你如何防止反彈？似乎檢測我們是否處於邊緣的唯一方法是在滾動後，而不是之前 – 2018-02-15 19:55:04

默認情況下（通過在超鏈接中放置target =「_ blank」>）在新標籤頁/窗口中打開特定頁面。這樣就不會有前一頁返回。

或者默認情況下阻止水平滾動。要做到這一點，你可以使用jQuery。鼠標滾輪做：

$(document).on("mousewheel",function(event,delta){ 
    // prevent horizontal scrolling 
    if (event.originalEvent.wheelDeltaX !== 0) { 
    event.preventDefault(); 
    } 
});

來源

2013-06-10 19:13:05 redgetan

最好使用」event.stopPropagation（）「 – sheerun 2015-10-16 12:26:12

@sheerun不，它不是。 stopPropagation殺死可能導致意外行爲的事件，並依賴這些事件觸發第三方代碼中的錯誤。總是喜歡preventDefault。此外，在Chrome 59.0.3071.115中，preventDefault似乎不再適用於這種情況（並且stopPropagation也沒有）。有沒有人有解決方案？ – Jesse 2017-07-03 16:21:18

是的，剛剛在Chrome 60 D上得到了一點點： – Dogoku 2017-09-09 15:32:05

大廈由@roy Riojas葡萄酒和@redgetan給出兩個以前的答案 - 我結合自己的答案，允許這是動態的，防止向前和向後 - 再 - 每@羅伊的評論 - 你必須知道你的類元素，併爲此實施 - 類，實際上是被滾動

(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));

來源

2014-02-12 23:56:33

我可以通過鍵入鉻禁用它嵌套元素：//標誌在地址欄並前往「Overscroll history navigation」並從下拉列表中將其設置爲「Disabled」。谷歌瀏覽器61

，這裏使我被標記的問題

來源

2014-02-13 08:28:31 Endoplasmic

禁用或替換滑動手勢，「複製」和封閉的答案。我相信這個答案更適合這個「重複」的問題，但是，我覺得這個答案可能會爲在某個問題上着陸的人節省時間。

更好的問題： Disable navigation swipe on Chrome browser in javascript

這谷歌開發的文章幫助我，讓e.preventDefault（）作爲工作和防止滑動手勢的Chrome 61

https://developers.google.com/web/updates/2017/01/scrolling-intervention

givanse的答案以下是我用於編寫自己的滑動事件處理程序的代碼：

Detect a finger swipe through JavaScript on the iPhone and Android

綜上所述，以下兩個事件用來實現滑動手勢：

handleTouchStart (e) { 
    ... 
}, 
handleTouchMove (e) { 
    ... 
    e.preventDefault() 
}

自Chrome 56，默認行爲是讓事件偵聽器的被動，從而禁用阻止Chrome瀏覽器的滑動手勢的能力。要覆蓋此行爲，事件監聽器可以添加如下：

document.addEventListener(
    'touchstart', 
    this.handleTouchStart, 
    {passive: false} 
) 
document.addEventListener(
    'touchmove', 
    this.handleTouchMove, 
    {passive: false} 
)

通過傳遞{被動：假}對象作爲第三個參數，以addEventListener方法，聽者被登記爲活動的，並且可以停止Chrome的默認行爲使用e.preventDefault（）事件方法。

來源

2017-09-27 04:25:13 user3139574

停止Chrome後退/前進兩根手指滑動

回答

相關問題