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

Question

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

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

Answer 1

我做了一个 codepen 来向您展示我的解决方案。我没有在手机上测试过这个。

但是！在我使用 chrome 浏览器的 chrome 书中，我最初遇到的空白问题是您提到的特定于移动设备的问题。我添加了几行你可以看到我在 codepen 的 JS 部分评论了。具体来说，我确保 body 有 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;}

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

Horizontal scrolling page, mobile browsers adding vertical height

html

css

mobile

cross-browser

horizontal-scrolling