Skip to content Skip to sidebar Skip to footer
Home / Cross Browser / Css / Horizontal Scrolling / Html / Mobile

Horizontal Scrolling Page, Mobile Browsers Adding Vertical Height

Post a Comment
I am trying to have a page that scrolls horizontally and not vertically. The code below works on desktop browsers, but when viewing the page in a mobile browser I get a problem. I

Solution 1:

I made a codepen to show you my solution. I have not tested this on mobile.

However! On my chromebook with chrome browser I initially had the whitespace issue you mentioned was mobile-specific. I added a few lines you can see I commented in the JS part of the codepen. Specifically I made sure the body had margin: 0; and then used overflow-x and overflow-y properties on the body and .wrapper to further control the scrollbars that were causing some whitespace with the use of vh.

HTML:

<html><head><metaname="viewport"content="width=device-width, initial-scale=1.0"><linktype="text/css"href="css/style.css"></head><body><divclass="wrapper"><divclass="box"></div><divclass="box"></div><divclass="box"></div><divclass="box"></div><divclass="box"></div></div></body></html>

CSS:

.html, body {
    margin: 0;
    overflow-y: hidden;
    max-height:100vh;}

    .wrapper{
        width: 2300px;
        display:flex;
        background-color:red;
        height:100vh;
        max-height:100vh;
        overflow-x: scroll;
        overflow-y: hidden;
        -webkit-overflow-scrolling:touch}

    .box{
        position:relative;
        align-self: center;
        margin-left:50px;
        float:left;
        width:400px;
        height:400px;
        background-color:white;}

Post a Comment for "Horizontal Scrolling Page, Mobile Browsers Adding Vertical Height"