溢出(overflow):在父元素之外的元素上滚动

Question

当我想放一个溢出时，我遇到了一个小问题：滚动一个元素。这个元素超出了他的父母，我只想让它滚动。我在代码笔上重新设计了这个问题，这样你就可以检查了。我想保持整个页面不滚动。只有我想要的元素才能滚动。对不起我的英语。

* {
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轴上滚动(上下，而不是从左到右(，它不会滚动，因为你在父轴上没有设置高度。你只在孩子身上设置了一个150像素的高度，或者450像素。此外，如果你想确保你只上下滚动，你需要指定你只想在那个轴上滚动，而不是在另一个轴上滚动——如下所示。

如果您尝试将溢出属性更改为auto而不是scroll(这是检查是否会有溢出的好方法，因为只有在需要时才会出现滚动条(，您会看到滚动条没有出现，因此当前没有溢出。

如果你想滚动，你需要将高度设置为小于孩子的总高度(450像素(。

* {
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>