为 div 制作自己的滚动条

Question

我使用固定的div制作了一个弹出窗口并模糊了背景。

.blur#blur.active {
filter: blur(20px);
pointer-events: none;
user-select: none;
}
.popup {
position: fixed;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
width: 600px;
padding: 50px;
box-shadow: 0 5px 30px rgba(0, 0, 0, .30);
background: #fff;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
visibility: hidden;
opacity: 0;
transition: 0.5s;
}
.popup.active {
top: 50%;
visibility: visible;
opacity: 1;
transition: 0.5s;
}

<div id="textPopup" class="popup">
<a onclick="hideAllForms()" style="cursor: pointer;"><img style="width: 35px; float: right;" src="images/icons/kreuz.png" /></a>
<h2>Header for the text</h2>
<p>Long text</p>
</div>

而这个 HTML

现在，其中一个弹出窗口应该包含很长的文本，因此您应该能够向下滚动div 容器中的文本，而不是向下滚动页面。

谢谢！

Answer 1

我们可以尝试利用 CSS 中的溢出属性。但仅适用于固定的高度和宽度。

.popup{
overflow: scroll;       //newly added
position: fixed;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
width: 600px;
padding: 50px;
box-shadow: 0 5px 30px rgba(0, 0, 0, .30);
background: #fff;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
visibility: hidden;
opacity: 0;
transition: 0.5s;
}

Answer 2

没关系，我有一个答案。 只是

overflow-y: scroll;
max-height: 100%;

Answer 3

在 CSS 中，将overflow: scroll;或overflow: auto;添加到带有长文本的div 中，它应该滚动。

Answer 4

添加固定height并使用overflow: auto;在内容高于容器高度时启用滚动。

.popup {
position: fixed;
width: 600px;
height: 200px;
background: #e0e0e0;
overflow: auto;
}

<div id="textPopup" class="popup">
<h2>Header for the text</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>