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

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

html css mobile

Html 水平滚动页面，移动浏览器添加垂直高度,html,css,mobile,cross-browser,horizontal-scrolling,Html,Css,Mobile,Cross Browser,Horizontal Scrolling,我试图有一个页面，滚动水平，而不是垂直。下面的代码适用于桌面浏览器，但在移动浏览器中查看页面时，我遇到了一个问题。我仍然可以水平滚动，但高度不限于100vh，包装下面填充了大量空白 <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css

我试图有一个页面，滚动水平，而不是垂直。下面的代码适用于桌面浏览器，但在移动浏览器中查看页面时，我遇到了一个问题。我仍然可以水平滚动，但高度不限于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，正文{
最大高度：100vh；}
.包装纸{
宽度：2300px；
显示器：flex；
背景色：红色；
高度：100vh；
最大高度：100vh；
溢出：滚动；
-webkit溢出滚动：触摸}
.盒子{
位置：相对位置；
自对准：居中；
左边距：50像素；
浮动：左；
宽度：400px；
高度：400px；
背景色：白色；}

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

然而！在我使用chrome浏览器的chromebook上，我最初有一个空白问题，你提到的是手机特有的。我添加了几行代码，你可以看到我在代码笔的JS部分发表了评论。具体来说，我确保主体具有

边距：0

然后使用

正文

和

包装

上的

overflow-x

和

overflow-y

属性来进一步控制使用

vh

导致一些空白的滚动条

HTML:

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

边距：0

然后使用

正文

和

包装

上的

overflow-x

和

overflow-y

属性来进一步控制使用

vh

导致一些空白的滚动条

HTML:

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

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