溢出时显示不必要的水平滚动条:滚动
问题描述:
我试图在单个页面上制作一个网站,页面的每个部分都占据了用户屏幕的大小(使用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; }
答
试试这个:
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;
}
+0
是的!不知道我可以分开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; }
使用'overflow:auto;'?!或'overflow-y:scroll;'。或'overflow-x:hidden;'。你之前测试过什么? – eisbehr