水平滚动页面,移动浏览器添加垂直高度
问题描述:
我想要一个水平滚动而不是垂直滚动的页面。下面的代码适用于桌面浏览器,但是在移动浏览器中查看页面时,我遇到了问题。我仍然可以水平滚动,但高度不限于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向你展示我的解决方案。我没有在手机上测试过。
但是!在我的chromebook上使用chrome浏览器时,我最初提到的空白问题是针对移动设备的。我添加了几行你可以看到我在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被隐藏。谢谢! – Johnathon