运行结果:
代码:
.agewindows {
position: absolute;
z-index: 1;
top: 50%;
left: 64px;
transform: translateY(-50%);
width: 870px;
height: 429px;
font-size: 14px;
line-height: 30px;
text-align: left;
color: #a2a2a2;
background: url(../img/弹窗.png) no-repeat center;
overflow: hidden;
}
.agewindows>.agetext {
/* 相对定位可以解决绝对定位无法显示滚动条的bug */
/* 当然如果没有影响也可以不写相对定位 */
position: relative;
/* box-sizing: border-box; */
padding: 0 0px 0 45px;
margin-top: 76px;
/* 溢出显示滚动条 */
overflow: auto;
/* 设置滚动条可滚动总高度以及文本内容总高度 */
max-height: 320px;
/* 设置滚动条右外边距 */
margin-right: 5px;
}
/* 设置滚动条样式 */
/*定义滚动条高宽粗细及背景 高宽分别对应横竖滚动条的尺寸*/
.agetext::-webkit-scrollbar {
width: 3.5px;
height: 4px;
}
/*定义滑块 内阴影+圆角*/
.agetext::-webkit-scrollbar-thumb {
/* 滑块颜色 */
background-color: #968569;
/* 滑块包括padding*/
background-clip: padding-box;
/* 滑块最小高度 */
min-height: 100px;
/* 滑块圆角 */
border-radius: 5px;
}
/* 定义滚动条轨道 内阴影+圆角 */
.agetext::-webkit-scrollbar-track {
/* 宽度3.5px */
width: 5px;
/* 滚动条轨道背景颜色 */
/* background-color: #000; */
background-color: #fff;
/* 滚动条轨道圆角 */
border-radius: 5px;
}
/* 设置滚动条样式结束 */
.p1c_age:hover .agewindows {
display: block;
}