Horizontal Scrolling Page, Mobile Browsers Adding Vertical Height
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"