Question

当我想溢出时，我遇到了一个小问题：在一个元素上滚动。这个元素超出了他的父母，我只想使其滚动。我在Codepen上重现了该问题，因此您可以检查一下。我想让整个页面不滚动。只要我想要的元素就可以滚动。对不起，我的英语。

* {
  border: 1px solid black;
}

html {
  height: 100vh;
  margin: 0;
  padding: 5px;
}

body {
  height: 100%;
  margin: 0;
}

img {
  width: 150px;
  display: block;
  margin: auto;
  margin-top: 50px;
}

.website {
  width: 960px;
  margin: auto;
}

input {
  width: 100%;
}

.yes {
  height: 150px;
}

.container_scroll {
  overflow: scroll; /* not working*/
}

<img src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/5f4bd7a6-f763-4518-9b81-bdfd40ce3fc9/d26yer1-421bb5b8-9fc2-4d5a-b2d1-1e1f81b26b82.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzVmNGJkN2E2LWY3NjMtNDUxOC05YjgxLWJkZmQ0MGNlM2ZjOVwvZDI2eWVyMS00MjFiYjViOC05ZmMyLTRkNWEtYjJkMS0xZTFmODFiMjZiODIucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.p5vfqGmq9kIylfG3glHGa20CAPUtoWlAxKEGpIvGOi8">
<div class="website">
  <section>
    <h2>title</h2>
    <input type="text" placeholder="my_text">
    <div class="container_scroll">
      <div class="yes"></div>
      <div class="yes"></div>
      <div class="yes"></div>
    </div>
  </section>
</div>

Answer 1

假设您尝试在y轴上滚动（上下滚动，而不是从左到右），则不会滚动，因为您没有在父级上设置高度。您只能在子级上设置总计150px的高度，或总共450px。另外-如果要确保仅上下滚动，则需要指定只在该轴上滚动，而不要在另一轴上滚动-如下所示。

如果您尝试将溢出属性更改为自动而不是滚动（检查是否有溢出的一种好方法，因为只有在需要时才显示滚动条）-您会看到滚动条没有出现-因此没有溢出当前。

如果要滚动，则需要将高度设置为小于子项的总高度（450px）。

* {
  border: 1px solid black;
}

html {
  height: 100vh;
  margin: 0;
  padding: 5px;
}

body {
  height: 100%;
  margin: 0;
}

img {
  width: 150px;
  display: block;
  margin: auto;
  margin-top: 50px;
}

.website {
  width: 960px;
  margin: auto;
}

input {
  width: 100%;
}

.yes {
  height: 150px;
}

.container_scroll {
  overflow-x: hidden; /* Hide horizontal scrollbar */
  overflow-y: scroll; /* Add vertical scrollbar */
  height: 300px;
}

<img src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/5f4bd7a6-f763-4518-9b81-bdfd40ce3fc9/d26yer1-421bb5b8-9fc2-4d5a-b2d1-1e1f81b26b82.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzVmNGJkN2E2LWY3NjMtNDUxOC05YjgxLWJkZmQ0MGNlM2ZjOVwvZDI2eWVyMS00MjFiYjViOC05ZmMyLTRkNWEtYjJkMS0xZTFmODFiMjZiODIucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.p5vfqGmq9kIylfG3glHGa20CAPUtoWlAxKEGpIvGOi8">
<div class="website">
  <section>
    <h2>title</h2>
    <input type="text" placeholder="my_text">
    <div class="container_scroll">
      <div class="yes"></div>
      <div class="yes"></div>
      <div class="yes"></div>
    </div>
  </section>
</div>

溢出：滚动到其父元素之外的元素

1 个答案: