2017-05-22 108 views
0

我會盡我所能解釋這一點。如果您在任何iPhone上轉到target.com或amazon.com,並且您嘗試向左或向右滑動,則頁面不會移動。我目前有一個網站,如果有人向左或向右滑動,只有主頁正在移動。如果你放開屏幕,屏幕會跳回到中間,但它仍然很煩人。它只在iPhone上,這與iPhone 7無關,你可以在iPhone或iPhone上進行刷卡。解決這個問題的唯一方法就是縮小頁面,然後當它跳回到正常狀態時,只有這樣纔不會左右滑動。這裏是網站鏈接檢查:airlinehyd.comiPhone禁用左右滑動來使頁面移動

有沒有辦法通過jQuery或CSS關閉此功能?我已經嘗試將overflow-x: hidden;添加到身體,但沒有做任何事情。有任何想法嗎?

回答

0
html { 
overflow: hidden; 
/* height: 100%; I commented out this declaration because it messes up your scrolling */ 
} 

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

來源:Prevent "overscrolling" of web page

確保測試,在所有的瀏覽器以及移動你推到生產環境之前,但它在iPhone上運行。

+0

這可以正常工作,但是這樣可以防止使用檢查工具時的滾動,所以我必須找到另一個解決方案 – xohbrittx

+0

不要將這些規則添加到包含類或ID的選擇器中。確保你的選擇器只是說'html {}'和'body {}' - 在你的css底部創建這些新規則來確保。以防萬一,從主體中刪除舊的'overflow-x:hidden'。此修補程序可以在您的網站上使用Safari Mobile Web Inspector(在iPhone上)正常工作,並且在實施時不會中斷您的滾動。 –

+0

在我從'html {}'內部註釋掉'height:100%'之前,您可能已經嘗試了我的解決方案 - 請參閱灰色區域的更新答案。當我在'html {}'選擇器中包含'height:100%'時,這就妨礙了你的滾動操作。當我評論它時,就像一種魅力。 或者,您嘗試使用的開發環境可能與您指向我們的實時站點不同。如果你已經用上面的'height:100%'註解了我的解決方案,請嘗試取消註釋,看看它是否能夠工作。 –