前端 html css页面局部超出范围后展示滚动条并实现滚动效果

代码结构：

先看结构，页面是一个弹窗，弹窗分上下两部分。上部分为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;

}

参考链接