需要帮助弄清楚如何使弹出窗口的文本部分垂直滚动

Question

我正在努力学习CSS和web设计，但我一直在学习如何使其发挥作用。我有一个页面，它会弹出一个信息窗口。然而，有很多文本，最终会将窗口推出框架，因此用户无法访问"X"来关闭窗口。我想这样做，这样窗口就不会展开，但文本部分可以垂直滚动。我试过很多处理溢出和溢出的方法，但似乎都不起作用。代码的HTML部分是：

<div class="popup" id="popup-experience">
<div class="popup__content">
<div class="popup__left">
<img src="img/some.jpg" alt="some photo" class="popup__img">
<!-- <img src="img/some-other.jpg" alt="some other photo" class="popup__img"> -->
</div>
<div class="popup__right">
<a href="#section-resume" class="popup__close">&times;</a>
<h2 class="heading-secondary u-margin-bottom-small">Work Experience</h2>
<h3 class="heading-tertiary u-margin-bottom-small">Below is a list of my experience</h3>
<p class="popup__text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed blandit libero volutpat sed cras ornare arcu dui. Ultrices sagittis orci a scelerisque purus semper eget duis. Et netus et malesuada fames ac turpis egestas sed tempus. Mauris a diam maecenas sed. Eget dolor morbi non arcu risus. Volutpat sed cras ornare arcu dui vivamus arcu felis bibendum. Bibendum ut tristique et egestas quis ipsum suspendisse ultrices. Venenatis tellus in metus vulputate eu scelerisque. Orci nulla pellentesque dignissim enim sit. Vestibulum sed arcu non odio euismod. Dolor morbi non arcu risus. Rhoncus est pellentesque elit ullamcorper dignissim cras. Cursus mattis molestie a iaculis. Phasellus egestas tellus rutrum tellus pellentesque eu tincidunt tortor. Felis imperdiet proin fermentum leo vel.
Auctor elit sed vulputate mi sit amet mauris commodo quis. Diam volutpat commodo sed egestas. Libero id faucibus nisl tincidunt eget nullam. Sed arcu non odio euismod lacinia at quis risus. Suscipit tellus mauris a diam maecenas sed enim ut. Molestie a iaculis at erat pellentesque adipiscing commodo elit. Nulla malesuada pellentesque elit eget gravida cum. Risus viverra adipiscing at in tellus integer feugiat scelerisque varius. Sagittis vitae et leo duis ut diam quam nulla porttitor. Amet consectetur adipiscing elit pellentesque habitant morbi tristique senectus. Est placerat in egestas erat imperdiet sed. A diam maecenas sed enim ut sem viverra aliquet. Enim eu turpis egestas pretium.
Adipiscing commodo elit at imperdiet dui accumsan sit amet. Turpis massa tincidunt dui ut ornare lectus sit. Venenatis a condimentum vitae sapien pellentesque habitant morbi tristique senectus. Non pulvinar neque laoreet suspendisse interdum. Nullam eget felis eget nunc lobortis mattis. Dictum fusce ut placerat orci nulla pellentesque. Id leo in vitae turpis massa sed elementum tempus egestas. Ultrices tincidunt arcu non sodales neque. Aliquet lectus proin nibh nisl. Morbi tincidunt ornare massa eget egestas purus viverra accumsan. Hac habitasse platea dictumst quisque sagittis purus sit. Nibh cras pulvinar mattis nunc sed blandit libero. Quis viverra nibh cras pulvinar. Sapien faucibus et molestie ac. Sit amet justo donec enim diam vulputate ut. Commodo sed egestas egestas fringilla phasellus faucibus. Enim nunc faucibus a pellentesque sit. Aenean pharetra magna ac placerat.
</p>
<a href="#popup-nextpage" class="btn btn--green">Go to next area &rarr;</a>
</div>
</div>
</div>

CSS是：

.popup {
height: 100vh;
width: 100%;
overflow:auto;
position: fixed;
top: 0;
left: 0;
background-color: rgba($color-black, .8);
z-index: 9999;
opacity: 0;
visibility: hidden;
transition: all .3s;
@supports (-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px)) {
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
background-color: rgba($color-black, .3);
}
&__content {
@include absCenter;
width: 75%;
background-color: $color-white;
box-shadow: 0 2rem 4rem rgba($color-black, .2);
border-radius: 3px;
display: table;
overflow: hidden;
opacity: 0;
transform: translate(-50%, -50%) scale(.25);
transition: all .5s .2s;
}
&__left {
width: 33.333333%;
display: table-cell;
}
&__right {
width: 66.6666667%;
display: table-cell;
vertical-align: middle;
padding: 3rem 5rem;
}
&__img {
display: block;
width: 100%;
}
&__text {
font-size: 1.4rem;
margin-bottom: 4rem;
-moz-column-count: 2;
-moz-column-gap: 4rem; //1em = 14px;
-moz-column-rule: 1px solid $color-grey-light-2;
column-count: 2;
column-gap: 4rem; //1em = 14px;
column-rule: 1px solid $color-grey-light-2;
-moz-hyphens: auto;
-ms-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
}
&__text-small{
// font-size: 1.09rem;
font-size: 1.2rem;
margin-bottom: 4rem;
-moz-column-count: 2;
-moz-column-gap: 4rem; //1em = 14px;
-moz-column-rule: 1px solid $color-grey-light-2;
column-count: 2;
column-gap: 4rem; //1em = 14px;
column-rule: 1px solid $color-grey-light-2;
-moz-hyphens: auto;
-ms-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
}
//Open states
&:target {
opacity: 1;
visibility: visible;
}
&:target &__content {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
&__close {
&:link,
&:visited {
color: $color-grey-dark;
position: absolute;
top: 2.5rem;
right: 2.5rem;
font-size: 3rem;
text-decoration: none;
display: inline-block;
transition: all .2s;
line-height: 1;
}
&:hover {
color: $color-primary;
}
}
}

所以我只希望Lorem ipsum部分可以垂直滚动。如有任何想法/帮助，我们将不胜感激！

Answer 1

您可以设置overflow: scroll值。

另一个解决方案是确保你的弹出窗口没有固定的高度，这样内容就会遵循网页的流程。我还没有测试你的代码来看看弹出窗口有多大，但我假设弹出窗口超过了屏幕高度(而你已经将弹出窗口设置为100vh，overflow: hidden值将截断任何大于此值的内容。(

也许你可以试着玩这个高度，把它设置为自动或100%。

Answer 2

我想我想通了。我不得不删除CSS的popup_text部分中的列，并设置overflow：滚动，但由于某种原因，它没有垂直滚动，而是水平滚动。为了改善外观，我将overflow改为-x:隐藏。最后，我不得不加一个高度：25雷姆。

它并不完美，也不如我所希望的那样，但它看起来并不可怕，而且很管用。如果有2列，甚至没有列，并在窗口中垂直滚动，那就太好了。