如何制作全尺寸水平滚动页面？答案

【问题标题】：How to make full size horizontal scroll pages?如何制作全尺寸水平滚动页面？
【发布时间】：2016-07-18 20:06:14
【问题描述】：

下面的代码显示了一些类名为page 的div，每个div 的高度为100vh，同时在其中显示一些文本。

我希望滚动是水平的而不是垂直的，我该如何让它工作？

HTML：

<div class="all">
  <div class="page">Page 1</div>
  <div class="page">Page 2</div>
  <div class="page">Page 3</div>
</div>

CSS：

.all {
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
}
.page {
  height: 100vh;
  position: relative;
  display: inline-block
}

【问题讨论】：

你需要让你的容器比显示端口宽。
您缺少一些东西：fiddle.jshell.net/5h0xj9hz。我会将100vh 更改为100%，因为vh 会导致垂直溢出。

标签： html css scroll horizontal-scrolling

【解决方案1】：

每个页面的水平滚动覆盖整个视口。

html, body {
  height: 100%;
  margin: 0;
}
.all {
  font-size: 0; /*remove white space*/
  height: 100%;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
}
.page {
  font-size: 16px; /*reset font size*/
  height: 100%;
  width: 100%;
  display: inline-block;
}
.page:nth-child(1) {
  background: pink;
}
.page:nth-child(2) {
  background: lightgreen;
}
.page:nth-child(3) {
  background: gold;
}

<div class="all">
  <div class="page">Page 1</div>
  <div class="page">Page 2</div>
  <div class="page">Page 3</div>
</div>

【讨论】：

【解决方案2】：

只需添加 float:left;，我认为它应该可以工作

.all {
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
float: left;
}

.page {
height: 100vh;
position: relative;
display: inline-block
}

【讨论】：