css页面局部超出范围后展示滚动条并实现滚动效果
目的:当main-section区域不超出大小限制时;当main-section区域超出大小限制时,希望有滚动条展示并实现滚动效果。先看结构,页面是一个弹窗,弹窗分上下两部分。上部分为top-section,中间一根分割线,下部分为main-section。
·
代码结构:
<template>
<div class="popup">
<div class="popup-content flex-v-left">
<div class="top-section">
<div class="P2">详细信息</div>
<div class="closeBtn" @click="closeDetailPopup"></div>
</div>
<div class="divider-main"></div>
<div class="main-section flex-h-top">
<--此处省略核心代码-->
</div>
</div>
</div>
</template>
先看结构,页面是一个弹窗,弹窗分上下两部分。上部分为top-section,中间一根分割线,下部分为main-section。
目的:当main-section区域不超出大小限制时;没有滚动条;当main-section区域超出大小限制时,希望有滚动条展示并实现滚动效果。
代码实现:
.main-section::-webkit-scrollbar {
width: 6px;
/* 设置滚动条宽度 */
}
.main-section::-webkit-scrollbar-thumb {
background-color: #c1c1c1;
/* 设置滚动条颜色 */
border-radius: 4px;
/* 设置滚动条圆角 */
}
.main-section {
overflow: auto;
}
更多推荐
已为社区贡献1条内容
所有评论(0)