Question

我想要一个水平滚动而不是垂直滚动的页面。以下代码适用于桌面浏览器，但在移动浏览器中查看页面时，我遇到了问题。我仍然可以水平滚动，但高度不限于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;}

Answer 1

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

然而！在我使用Chrome浏览器的chromebook上，我最初提到的空白问题是特定于移动设备的。我添加了几行，你可以看到我在codepen的JS部分评论过。具体来说，我确保正文已margin: 0;，然后在overflow-x和overflow-y上使用body和.wrapper属性来进一步控制导致某些空格的滚动条使用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;}

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

1 个答案: