Berry Jones Berry Jones - 3 months ago 19
CSS Question

unecessary horizontal scrollbar displayed on overflow:scroll

I'm trying to make a website on a single page, with every section of the page taking up exactly the size of the user screen (using backstrech for backgrounds).
Like this: http://projects.lukehaas.me/scrollify/#home

The problem comes when the user's screen height is too small to contain my page's content. In that case, I want my background to stretch more than the user's screen, as it has to fill the entire content's background.

So, I've been using overflow:scroll, which fix the entire problem except for displaying an annoying horizontal scroll bar, even when it is not needed. What I mean is, even at full-screen when there's no overflow at all, the horizontal scrollbar appears

This is my code:

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; }

Answer

try this:

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;
}