溢出時顯示不必要的水平滾動條：滾動

-3

我試圖在單個頁面上製作一個網站，頁面的每個部分都佔據了用戶屏幕的大小（使用backstrech作爲背景）。像這樣：http://projects.lukehaas.me/scrollify/#home 溢出時顯示不必要的水平滾動條：滾動

問題出在用戶的屏幕高度太小而不能包含我的網頁內容。在這種情況下，我希望我的背景伸展得比用戶的屏幕多，因爲它必須填充整個內容的背景。

所以，我一直在使用overflow：scroll，它修復了整個問題，除了顯示惱人的水平滾動條，即使不需要。我的意思是，即使在全屏時有完全沒有溢出，水平滾動條出現

這是我的代碼：

section#page1 { 
    background: url('../img/background.jpg') no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    height: 100vh; 
    overflow: scroll; }

來源

2016-08-23 Berry Jones

使用'overflow：auto;'?!或'overflow-y：scroll;'。或'overflow-x：hidden;'。你之前測試過什麼？ – eisbehr

試試這個：

section#page1 { 
    background: url('../img/background.jpg') no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    height: 100vh; 
    overflow-x: hidden; 
    overflow-y: scroll; 
}

來源

2016-08-23 11:17:30 BonifatiusK

是的！不知道我可以分開x和y。謝謝！ –

section#page1 { 
    background: url('../img/background.jpg') no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    height: 100vh; 
    overflow: auto; 
}

來源

2016-08-23 11:24:23

溢出時顯示不必要的水平滾動條：滾動

回答

相關問題