禁用iPad橫向滾動

我有一個網站，它具有用於動畫的視口外的元素，每當您滾動到頁面的不同部分時，它們基本上都會啓動。禁用iPad橫向滾動

問題是你可以水平滾動，從網站的內容出來的視口，並有權訪問不應該被看到的元素（類似於{right：-660px;}的元素應該是出直到它應該進入視口{right：100px}或某物）。

reference of the problem

已經嘗試過

<meta name="viewport" content="width=device-width; initial-scale = 1.0; maximum-scale=1.0; user-scalable=no" />

而且

body,html{overflow-x:hidden!important}

我敢肯定，這是一個可能有許多失眠了，就像我的一個問題。

任何幫助將非常感激。

來源

2014-04-01 SinSync

由於Mac的設備和iOS，overflow-x:hidden對身體是不能容忍，因爲它是在PC上。如果必須有一個元素必須出現在屏幕外，請將其放在不比屏幕寬的div中，並且上面有overflow:hidden。

E.g.

.overflow-div { max-width: 100%; position: relative; overflow: hidden; } 
.my-animatable-element { position: absolute; right: -660px; } 

<body> 
<div class="overflow-div"> 
    <div class="my-animatable-element"></div> 
</div> 
</body>

鏈接或代碼將幫助您解決問題真的很長。

注：max-width:100%是不是在我簡單的例子必要的，但也可能是您的特定情況下，這就是爲什麼我把它放在

來源

2014-04-01 11:19:07 Adam

亞當，你好，我也試過，沒有運氣。我絕對定位的元素在一個隱藏的div中。如果向左滑動，視口會延伸至其位置。我有一個封裝div＃頁面，它不會隱藏應用了樣式的div的水平溢出。 – SinSync

然後，也許你的頁面上有太多東西，導致頁面水平滾動。你有鏈接嗎？ – Adam

是的，亞當就是這樣，你幫助我識別盲點。 :)我會將其標記爲正確答案，只需在上面添加您的評論即可。歡呼和感謝您的時間！ – SinSync

<meta name="viewport" content="width=device-width; initial-scale = 1.0; maximum-scale=1.0; user-scalable=no" /> 
<style type="text/css"> 
body { 
overflow-x:hidden; 
}

來源

2014-04-01 10:26:08 RichTea

已經嘗試過，以及不工作。我曾經在我的描述中提到過嘗試，但由於格式化，它似乎已被刪除。 – SinSync

我有同樣的問題。這是我工作的東西：

div { 
    overflow:hidden; 
}

來源

2015-08-09 17:45:51 TalZ

禁用iPad橫向滾動

回答

相關問題