1. 程式人生 > >禁止瀏覽器滑動

禁止瀏覽器滑動

問題:在移動端的開發中我們常常會遇到當內容快滑動到頂部或者底部的時候會把瀏覽器整體拉動。

問題的原因,當頁面內的滾動到達頂端的時候或者我們剛剛進去頁面,有時候我們會去滑滾動區域外的元素。這個時候如果快速拉動,就會導致拉動了瀏覽器。

解決原理: 我們可以每次滑動的時候獲取到我們手指放開的時間,當第二次滑動如果時間在300毫秒以下我們就禁止body的預設事件

程式碼

//禁止滾動瀏覽器
const prohibitWindow = () => {
  var lastTouchEnd = 0;
  document.addEventListener('touchend', function(event) {
    var now = (new Date()).getTime();
    if (now - lastTouchEnd <= 100) {
      event.preventDefault();
    }
    lastTouchEnd = now;
  }, false)
}