水平滚动页面，移动浏览器增加垂直高度答案

【问题标题】：Horizontal scrolling page, mobile browsers adding vertical height水平滚动页面，移动浏览器增加垂直高度
【发布时间】：2016-06-09 01:29:53
【问题描述】：

我想要一个水平滚动而不是垂直滚动的页面。下面的代码适用于桌面浏览器，但是在移动浏览器中查看页面时出现问题。我仍然可以水平滚动，但高度不限于 100vh，并且在包装器下方填充了大量空白空间。

    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    </head>

    <body>
        <div class="wrapper">
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
        </div>
    </body>

    </html>

    .html, body {
        max-height:100vh;}

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

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

【问题讨论】：

标签： html css mobile cross-browser horizontal-scrolling

【解决方案1】：

我创建了codepen 向您展示我的解决方案。我没有在手机上测试过。

但是！在我的带有 chrome 浏览器的 chromebook 上，我最初遇到你提到的空白问题是特定于移动设备的。我添加了几行，你可以看到我在 codepen 的 JS 部分评论。具体来说，我确保正文具有margin: 0;，然后在body 和.wrapper 上使用overflow-x 和overflow-y 属性来进一步控制使用vh 导致一些空白的滚动条。

HTML：

<html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    </head>

    <body>
        <div class="wrapper">
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="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;}

【讨论】：

完美。这只是分离包装上的溢出物并确保 Y 被隐藏。谢谢！