禁用全寬度部分的移動水平滾動

我遇到了一個我正在開發的網站之一的輕微問題。我決定在網站上有幾個全寬的部分。在移動設備上一切都很棒，但我無法移除移動設備上的橫向滾動，這實質上是破壞了網站。
我已經嘗試了幾種不同的方法，如：
添加視禁用全寬度部分的移動水平滾動

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

添加最大寬度屬性的身體和禁用溢出-X

body { max-width:100%; overflow-x:hidden;}

我的全寬度部分代碼如下所示：

.full-width-light { 
    margin: 0 -9999rem; 
    padding: 0.01rem 9999rem; 
    overflow: hidden; 
    color:$basegrey; 
    background-color:$basewhite; 
}

但是，當我添加額外的最大寬度：100％的元素鋁l內部的兒童物品搖擺不定，擠在一個小區域。

然而，在桌面上，一切正常，我沒有任何水平滾動問題，所以如此。

我的身體具有下列分配給它

body { 
max-width:100%!important; 
overflow-x:hidden!important; 
} 
html, body { 
    height: 100%; 
}

來源

2016-02-05 Jason Madrazo

如果您可以提供您正在遇到的問題的工作演示，那將非常有幫助。 –

嗯，主頁在我的iPhone上正常工作...哦，我現在看到它。 –

這就是問題所在。網站工作正常，但水平滾動正在殺死它。它也可以在開發工具中使用。 –

通過去除

/* margin: 0 -9999rem; */ 
/* padding: 0.01rem 9999rem; */

而不是添加

margin:0 -6% 0 -6%;

主要包裝類解決它具有90％，從而除去初始保證金解決該問題的寬度。

感謝您的回答卡爾，我感謝您的幫助。

來源

2016-02-05 12:19:07

要扔這件事的問題的原因（你是否可以用「修復」居住或雖然尋找替代...性質

我已經減少（通過開發工具刪除一切），直到我只是留下了最後的hero-footer格 - 水平滾動保持

拆除保證金/寬度設置（這似乎只是在一個有點瘋狂。值tbh）刪除水平線牙科滾動。

.full-width-dark { 
    /* margin: 0 -9999rem; */ 
    /* padding: 0.01rem 9999rem; */ 
    color: #F5F5F5; 
    background-color: #262626; 
    overflow-x: hidden; 
}

有足夠的類來覆蓋該塊的值。

來源

2016-02-05 12:07:37

禁用全寬度部分的移動水平滾動

回答

相關問題