iOS：禁用彈跳滾動但允許正常滾動

Question

我不希望我的網站內容在用戶點擊頁面邊緣時四處晃動。 我只是想讓它停下來。

我隨處可見的無處不在的 javascript 解決方案是這樣的：

$(document).bind(
   'touchmove',
   function(e) {
     e.preventDefault();
   }
);

但這會完全阻止滾動。 有沒有辦法只消除反彈。 最好使用 CSS 或元標記而不是 JS，但任何有效的方法都可以。

Answer 1

我必須添加另一個答案。 我的第一種方法應該可行，但是，有一個iOS錯誤，即使是e.stopPropagation，它仍然會使整個頁面變得麻煩。

mikeyUX找到了解決方法： https ：//stackoverflow.com/a/16898264/2978727我想知道為什么他只是點擊這個好主意點擊幾下...

這就是我在我的案例中使用他的方法：

var content = document.getElementById('scrollDiv');
content.addEventListener('touchstart', function(event) {
    this.allowUp = (this.scrollTop > 0);
    this.allowDown = (this.scrollTop < this.scrollHeight - this.clientHeight);
    this.slideBeginY = event.pageY;
});

content.addEventListener('touchmove', function(event) {
    var up = (event.pageY > this.slideBeginY);
    var down = (event.pageY < this.slideBeginY);
    this.slideBeginY = event.pageY;
    if ((up && this.allowUp) || (down && this.allowDown)) {
        event.stopPropagation();
    }
    else {
        event.preventDefault();
    }
});

Answer 2

通過阻止文檔的默​​認行為來禁用彈跳：

document.addEventListener("touchmove", function(event){
    event.preventDefault();
});

允許滾動以防止觸摸到達文檔級別（您將阻止滾動）：

var scrollingDiv = document.getElementById('scrollDiv');
scrollingDiv.addEventListener('touchmove', function(event){
    event.stopPropagation();
});

注意這兩者之間的區別：

event.stopPropagation()
event.preventDefault()

StopPropagation應該是你的選擇！ 這是一個非常好的解釋： http ： //davidwalsh.name/javascript-events

編輯：同樣的問題，相同的解決方案： 在iOS 5上的document.ontouchmove和滾動

Edit2：修改了變量名中的拼寫錯誤，在方法后添加了括號

Answer 3

我在stackoverflow上嘗試了很多不同的方法，但iNoBounce對我來說真的很有用： https ： //github.com/lazd/iNoBounce

我只是把它包含在我的index.html中：

<script src="inobounce.js"></script>

Answer 4

該庫是我的方案的解決方案。 簡單的使用方法只包括庫並初始化您想要的地方;

noBounce.init({   
    animate: true
});

如果你想防止只在一個元素上而不是在整個頁面上彈跳，你可以這樣做：

 noBounce.init({
    animate: true,
    element: document.getElementById("content")
  }); 

Answer 5

如果適用於桌面瀏覽器，則不需要任何JavaScript代碼，只需幾行CSS代碼：

html {
    height  : 100%;
    overflow: hidden;
}
body {
    height  : 100%;
    overflow: auto;
}

Answer 6

找到一個對我有用的代碼，我相信它會對你有用。

解決方案寫在這里： http ： //apdevblog.com/optimizing-webkit-overflow-scrolling/

基本上，你需要有這個js代碼：

    document.addEventListener("DOMContentLoaded", ready, false);
    document.addEventListener("touchmove", function (evt)
    {
        evt.preventDefault();
    }, false);

    function ready()
    {
        var container = document.getElementsByClassName("scrollable")[0];
        var subcontainer = container.children[0];
        var subsubcontainer = container.children[0].children[0];

        container.addEventListener("touchmove", function (evt)
        {
            if (subsubcontainer.getBoundingClientRect().height > subcontainer.getBoundingClientRect().height)
            {
                evt.stopPropagation();
            }
        }, false);
    }

然后，讓你的可滾動div與class =“scrollable”。

Answer 7

在嘗試了這些建議並閱讀了幾篇文章后，我的修復就是使用CSS屬性<overflow-x：hidden; >在有問題的元素/容器上。

Answer 8

iOS 16 開始支持 css 滾動行為。 如果你的目標是 > iOS 16 個設備（包括它的 WKWebview），要防止過度滾動反彈，解決方案很簡單

添加以下 CSS

html {
  overscroll-behavior: none;
}

iOS 16及以上測試。