ipad safari：禁用滾動和反彈效果？

142

2011回答：對於Web/HTML應用的iOS Safari瀏覽器中運行你想要的東西像

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

對於iOS 5，你可能要考慮以下帳戶：document.ontouchmove and scrolling on iOS 5

更新2014年9月：更徹底的方法可以在這裏找到：https://github.com/luster-io/prevent-overscroll。對於和很多有用的Web應用程序的建議，請參閱~~http://www.luster.io/blog/9-29-14-mobile-web-checklist.html~~

更新2016年3月：那最後一個環節不再有效 - 看到https://web.archive.org/web/20151103001838/http://www.luster.io/blog/9-29-14-mobile-web-checklist.html存檔的替代版本。感謝@falsarella指出了這一點。

來源

2011-10-14 17:17:26

+1

我有web應用程序的iOS Safari瀏覽器內運行，我曾嘗試禁用ontouchmove事件，但它仍然可以看到反彈的效果，如果做小心。（iOS 5） – Nilesh

+0

@Nilesh：document.ontouchmove是*在iOS Safari中執行此操作的方式。然而，你的dom中的某些元素可能會阻止事件傳播到達文檔元素 - 參見http://stackoverflow.com/questions/7798201/document-ontouchmove-and-scrolling-on-ios-5 –

+0

@ Nilesh：你可能會發出ontouchcancel事件： – mikermcneil

6

您可以使用此jQuery代碼片段來做到這一點：

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

這將阻止垂直滾動以及任何反彈影響您的網頁上出現。

來源

2013-11-26 12:19:22

+8

這不是Javascript，它是jQuery。你應該提到，並非每個人都在使用該框架。 – inta

+1

剛剛編輯感謝 –

+0

我該如何停止水平反彈或滾動 –

3

我知道這有點偏離滑雪道，但我一直在使用Swiffy將Flash轉換爲交互式的HTML5遊戲，並且遇到了相同的滾動問題，但沒有找到可行的解決方案。

我遇到的問題是Swiffy舞臺佔用了整個屏幕，所以一旦載入，文檔touchmove事件從未觸發。

如果我試圖將相同的事件添加到Swiffy容器中，它在舞臺加載後立即被替換。

最後，我通過將touchmove事件應用於舞臺中的每個DIV來解決它（相當混亂）。由於這些divs也不斷變化，我需要繼續檢查它們。

這是我的解決方案，這似乎工作得很好。我希望對任何試圖找到與我相同的解決方案的人都有幫助。

var divInterval = setInterval(updateDivs,50); 
function updateDivs(){ 
$("#swiffycontainer > div").bind(
    'touchmove', 
    function(e) { 
     e.preventDefault(); 
    } 
);}

來源

2014-03-25 19:25:25 Tom

+0

這將禁用整個滾動ipad –

3

overflow: scroll; 
-webkit-overflow-scrolling: touch;

在容器您可以設置內部元素的反彈效應

來源：http://www.kylejlarson.com/blog/2011/fixed-elements-and-scrolling-divs-in-ios-5/

來源

2015-03-20 09:50:28 user956584

72

你也可以改變身體/ HTML的位置固定：

body, 
html { 
    position: fixed; 
}

來源

2015-04-14 13:51:31

+0

這實際上工作得很好，在iPad的iOS 8.2 Safari;沒有反彈效應了。 –

+1

達到目前爲止所見的最佳方式 – hildende

+4

如果您想放置位置：絕對和所有邊都設置爲0（以創建全屏div），則不起作用 - 您的整個文檔縮小爲無。 – riv

2

Try this JS sollutuion：

var xStart, yStart = 0; 

document.addEventListener('touchstart', function(e) { 
    xStart = e.touches[0].screenX; 
    yStart = e.touches[0].screenY; 
}); 

document.addEventListener('touchmove', function(e) { 
    var xMovement = Math.abs(e.touches[0].screenX - xStart); 
    var yMovement = Math.abs(e.touches[0].screenY - yStart); 
    if((yMovement * 3) > xMovement) { 
     e.preventDefault(); 
    } 
});

防止默認的Safari滾動和反彈手勢而不分離您的觸摸事件偵聽器。

來源

2015-09-04 13:24:23

+0

這會停止Web應用程序完全滾動正文元素。 – MartijnICU

1

沒有解決方案適用於我。這就是我的做法。

html,body { 
     position: fixed; 
     overflow: hidden; 
    } 
    .the_element_that_you_want_to_have_scrolling{ 
     -webkit-overflow-scrolling: touch; 
    }

來源

2017-02-05 18:10:45

+0

我會做 .the_element_that_you_want_to_have_scrolling滾動：touch; } –

0

生氣獼猴桃我得到了它使用的高度，而不是位置的工作類似：

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

.the_element_that_you_want_to_have_scrolling{ 
    -webkit-overflow-scrolling: touch; 
}

來源

2017-06-12 13:02:07 austinh7

1

對於那些誰正在使用的MyScript的Web應用程序，並與身體滾動/拖拽都在努力（在iPad上和平板電腦），而不是實際編寫：

<body touch-action="none" unresolved>

問題解決了我。

來源

2017-06-30 19:24:54 Miro

1

經過iphone測試。只需在目標元素容器上使用此CSS，它將更改滾動行爲，當手指離開屏幕時該行爲會停止。

-webkit-overflow-scrolling: auto

https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-overflow-scrolling

來源

2017-10-13 14:23:37 Dummy

0

您可以用js爲防止滾動：

let body = document.body; 

let hideScroll = function(e) { 
    e.preventDefault(); 
}; 

function toggleScroll (bool) { 

    if (bool === true) { 
    body.addEventListener("touchmove", hideScroll); 
    } else { 
    body.removeEventListener("touchmove", hideScroll); 
    } 
}

而不是僅僅運行/當你opnen /關閉模式停止toggleScroll FUNC。

喜歡這個toggleScroll(true)/toggleScroll(false)

（這僅適用於iOS，Android上不工作）

來源

2018-02-03 12:33:34

ipad safari：禁用滾動和反彈效果？

回答

相關問題