防止身體元素從滾動在觸摸設備上

Question

問題：

我在iOS主屏幕的Web應用程序，所以沒有瀏覽器窗口，它的外觀和功能非常好。我已經想出瞭如何讓內部div元素執行觸摸滾動事件並在iOS中使用動量/反彈樣式，並且這非常完美......我現在遇到的問題是反彈滾動（同樣，僅限iOS ）正在搞亂我在頁面上的任何固定元素或與網站相關的動畫。

當我嘗試以下方法：

document.ontouchmove = function(e) {e.preventDefault()}; 

問題停止，但現在我不能在我的應用程序任何地方滾動。

我需要什麼：

我想身體完全鎖定到位......如果有人抓住了，說，我的側欄導航欄或再頁，身體反彈上拉！但是如果有人在內容區域內，根本就沒有問題 - 應用程序無縫滾動，看起來很棒。如果我停止在側邊欄或導航欄或正文上滾動，則應用程序中的所有滾動操作都不起作用，並且基本上不起作用。

tl; dr：身體在卷軸上反彈。我想要一個滾動內容區域，而不需要滾動其他任何地方。身體永遠不會移動，但我認爲在身體內滾動的元素應該。

一點題外話，我已經發布的瀏覽器下面的流行的問題/解決方案（以及許多其他）：

1 2 3

我只是想之前張貼了人們認爲我沒有做任何搜索...我已經在這個幾個小時了，已經看到比上面發佈的更多的解決方案，但我想獲得上面列出的最流行的那些，所以沒有人認爲這是重複的題。

Answer 1

我前幾天想通了這一點，有這個方便jsbin設立證明我做了什麼，使這項工作：當你打開一個iPad此鏈接

My Working jsbin Example

，文本應該是可滾動的。當沒有當前觸摸移動事件正在工作時，嘗試拖動屏幕的其餘部分。

如果您使用它，您會注意到只有內部文本字段按預期方式移動。這是通過將我的.scrollable類放在.container類中來確定的。 .scrollable類佔據了其父容器的整個高度。

現在使容器更大的高度，如height: 500px。這裏的目標是使其足夠大，從而不會有足夠小的溢出，使iPad上的其他空白仍然存在。嘗試滾動或拉動它......沒有touchmove事件被激發，屏幕保持原位。

我的JS確定一個對象在被觸摸後是否溢出。如果是這樣，它會滾動。如果沒有，它不會發送滾動事件。

玩它，讓我知道如果我可以提供任何更好的例子，如果你遇到任何錯誤...現在唯一我知道的是，如果你真的試圖打破它，並開始拽在當前觸摸移動事件正在被解僱的情況下，或者頁面首先被加載......我不會將這些視爲「bug」，但是如果您也可以爲這些修復找到解決方法，那麼我都是耳朵！