javascript - 添加溢出滚动删除伪元素
问题描述
我在这里有一个工具提示,其中显示了一个被跟踪的电子邮件列表,它需要有一定的高度。所以,我添加了溢出。如果我这样做,我将失去作为伪元素放置的语音气泡。取消注释我在 css 中声明的行。我已经研究了关于类似问题的类似 StackOverflow 问题,但它们在我的情况下不起作用。
.center {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
position: relative;
}
.tooltip_container {
background: white;
height: 150px;
width: 350px;
z-index: 100;
display: block;
position: absolute;
left: 50%;
bottom: 10%;
transform: translate(-50%, -50%);
box-shadow: 0px 0px 11px 1px rgba(0, 0, 0, 0.34);
/* uncomment to see the change */
/* overflow-y: scroll; */
}
.tooltip_container::-webkit-scrollbar {
width: 5px;
}
.tooltip_container::-webkit-scrollbar-thumb {
background-color: darkgrey;
}
.tooltip_container::after {
content: " ";
position: absolute;
left: 20%;
top: 0;
width: 0;
border-bottom: 15px solid #dbdeb5;
border-right: 15px solid transparent;
border-left: 15px solid transparent;
transform: translateY(-100%);
}
.track_event img {
width: 15px;
height: 15px;
}
#track_events {
height: 30px;
width: 100%;
background: #dbdeb5;
}
#track_events_list {
margin-bottom: 25px;
}
.track_event {
display: flex;
flex-direction: row;
gap: 1rem;
align-items: baseline;
margin: 0 15px;
height: 100%;
border-bottom: 2px solid rgba(0, 0, 0, 0.2);
padding-bottom: 10px;
}
.mail_viewer_info {
display: flex;
flex-direction: column;
align-content: flex-start;
text-align: start;
}
<div class="center">
<div class="tooltip_container">
<section id="track_events"></section>
<section id="track_events_list">
<div class="track_event">
<img
src="https://image.flaticon.com/icons/png/512/535/535244.png"
alt=""
/>
<div class="mail_viewer_info">
<h3 class="tracked_email">elon@spacex.com</h3>
<div class="event_info">
<span>22m <span> . </span>opened email </span>
</div>
</div>
</div>
<div class="track_event">
<img
src="https://image.flaticon.com/icons/png/512/535/535244.png"
alt=""
/>
<div class="mail_viewer_info">
<h3 class="tracked_email">elon@spacex.com</h3>
<div class="event_info">
<span>22m <span> . </span>opened email </span>
</div>
</div>
</div>
<div class="track_event">
<img
src="https://image.flaticon.com/icons/png/512/535/535244.png"
alt=""
/>
<div class="mail_viewer_info">
<h3 class="tracked_email">elon@spacex.com</h3>
<div class="event_info">
<span>22m <span> . </span>opened email </span>
</div>
</div>
</div>
</section>
</div>
</div>
解决方案
你应该使用溢出-y#track_events_list
#track_events_list {
height: 150px;
margin-bottom: 25px;
overflow-y: scroll;
}
.center {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
position: relative;
}
.tooltip_container {
background: white;
height: 150px;
width: 350px;
z-index: 100;
display: block;
position: absolute;
left: 50%;
bottom: 10%;
transform: translate(-50%, -50%);
box-shadow: 0px 0px 11px 1px rgba(0, 0 0, 0.34);
/* uncomment to see the change */
/*overflow-y: scroll; */
}
.tooltip_container::-webkit-scrollbar {
width: 5px;
}
.tooltip_container::-webkit-scrollbar-thumb {
background-color: darkgrey;
}
.tooltip_container::after {
content: " ";
position: absolute;
left: 20%;
top: 0;
width: 0;
border-bottom: 15px solid #dbdeb5;
border-right: 15px solid transparent;
border-left: 15px solid transparent;
transform: translateY(-100%);
}
.track_event img {
width: 15px;
height: 15px;
}
#track_events {
height: 30px;
width: 100%;
background: #dbdeb5;
}
#track_events_list {
height: 150px;
margin-bottom: 25px;
overflow-y: scroll;
}
.track_event {
display: flex;
flex-direction: row;
gap: 1rem;
align-items: baseline;
margin: 0 15px;
height: 100%;
border-bottom: 2px solid rgba(0, 0, 0, 0.2);
padding-bottom: 10px;
}
.mail_viewer_info {
display: flex;
flex-direction: column;
align-content: flex-start;
text-align: start;
}
<div class="center">
<div class="tooltip_container">
<section id="track_events"></section>
<section id="track_events_list">
<div class="track_event">
<img
src="https://image.flaticon.com/icons/png/512/535/535244.png"
alt=""
/>
<div class="mail_viewer_info">
<h3 class="tracked_email">elon@spacex.com</h3>
<div class="event_info">
<span>22m <span> . </span>opened email </span>
</div>
</div>
</div>
<div class="track_event">
<img
src="https://image.flaticon.com/icons/png/512/535/535244.png"
alt=""
/>
<div class="mail_viewer_info">
<h3 class="tracked_email">elon@spacex.com</h3>
<div class="event_info">
<span>22m <span> . </span>opened email </span>
</div>
</div>
</div>
<div class="track_event">
<img
src="https://image.flaticon.com/icons/png/512/535/535244.png"
alt=""
/>
<div class="mail_viewer_info">
<h3 class="tracked_email">elon@spacex.com</h3>
<div class="event_info">
<span>22m <span> . </span>opened email </span>
</div>
</div>
</div>
</section>
</div>
</div>
推荐阅读
- azure-devops - Azure DevOps:更改拥有项目的组织
- c# - 如何在动画期间冻结控件上的滚动?
- ios - CoreBluetooth API MISUSE - iOS 13 中的 CBCentralManager 问题,如 Siri Shortcuts
- php - mgp25 Instagram-API API 请求过多
- javascript - 将数据从对象传递到数组
- javascript - 使用 Rest Get Api 消耗数据时出现 CORS 错误
- php - Voyager 安装 Laravel 上的外键约束格式不正确
- python - 如何编写一个程序来打印用户必须输入的十个数字的总和
- sql - 根据同一表中的其他列值更新列
- javascript - 图表 js 未在页面上加载