水平滚动页面，移动浏览器增加垂直高度 [英] Horizontal scrolling page, mobile browsers adding vertical height
问题描述
我正在尝试创建一个水平滚动而不是垂直滚动的页面.下面的代码在台式机浏览器上有效，但是在移动浏览器中查看页面时出现问题.我仍然可以水平滚动，但是高度不限于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;}
我制作了 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;}
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 can still scroll horizontally, but the height is not restricted to 100vh and a large amount of empty space is populated below the wrapper.
<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;}
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>
<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;}
这篇关于水平滚动页面，移动浏览器增加垂直高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
