Question

下面的代码显示了一些类名为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
}

Answer 1

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

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

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

Answer 2

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

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 个答案: