如何避免水平滑块布局中的垂直滚动条

Question

我将尝试创建一个滑块（向左或向右移动），但是当我在100vw上设置外部容器（.wrapper）宽度并将高度设置为100vh时每个子div，它会在垂直方向上溢出，我该如何避免它？

打开图片的详细描述

body{
  padding : 0;
  margin:0;
}
.wrapper {
  width : 200vw;  
}
.section {
  width : 100vw;
  height : 100vh;
  position:relative;
  float:left;
}
.section1 {
  background-color : red;
}
.section2{
  background-color : yellow;
}

<div class="wrapper">
  <div class="section section1">1</div>
  <div class="section section2">2</div>
</div>

如果您想使用在线编辑器进行编辑，可以尝试一下

---

我不知道为什么如果我只有一个孩子div（.section），高度不会垂直溢出（上下移动）

body{
  padding : 0;
  margin:0;
}
.wrapper {
  width : 100vw;  
}
.section {
  width : 100vw;
  height : 100vh;
  position:relative;
  float:left;
}
.section1 {
  background-color : red;
}
/*
.section2 {
  background-color : yellow;
}
*/

<div class="wrapper">
  <div class="section section1">1</div>
  <!--<div class="section section1">1</div>-->
</div>

Answer 1

虽然您的问题说您要隐藏水平滚动条（左侧和右侧），但您的图像表明您实际上要隐藏垂直滚动条（向上和向下）。

您希望向body添加overflow-y: hidden以隐藏垂直滚动条：

body {
  padding: 0;
  margin: 0;
  overflow-y: hidden;
}
.wrapper {
  width: 200vw;
}
.section {
  width: 100vw;
  height: 100vh;
  position: relative;
  float: left;
}
.section1 {
  background-color: red;
}
.section2 {
  background-color: yellow;
}

<div class="wrapper">
  <div class="section section1">1</div>
  <div class="section section2">2</div>
</div>

或者，如果您确实想要隐藏水平滚动条，则可以使用 overflow-x: hidden 来完成此操作，但请注意，在删除水平滚动条的情况下，您的内容实际上不会太高而无法垂直逃脱边界。将高度设置为 110vh 演示了此操作：

body {
  padding: 0;
  margin: 0;
  overflow-x: hidden;
}
.wrapper {
  width: 200vw;
}
.section {
  width: 100vw;
  height: 110vh;
  position: relative;
  float: left;
}
.section1 {
  background-color: red;
}
.section2 {
  background-color: yellow;
}

<div class="wrapper">
  <div class="section section1">1</div>
  <div class="section section2">2</div>
</div>

希望这有帮助！ :)