网页、h5默认滚动条样式重构

范德萨_

于 2024-05-27 16:21:48 发布

阅读量658

点赞数 4

CC 4.0 BY-SA版权

分类专栏：前端 css 文章标签：重构前端 html5 css3

本文链接：https://blog.csdn.net/weixin_61102579/article/details/139240998

前端同时被 2 个专栏收录

24 篇文章

订阅专栏

css

7 篇文章

订阅专栏

文章目录

前言
一、使用步骤
- 1、在想要滚动的元素上设置相应的css类名
- 2.设置样式
总结

前言

此文章用于，让我自己快速设置浏览器、h5 默认滚动条样式……

一、使用步骤

1、在想要滚动的元素上设置相应的css类名

代码如下：

<div class="list scroll-container">
	<p>…………</p>
	<p>…………</p>
	…………
</div>

2.设置样式

代码如下：

/* 容器样式 */
.list{
	height: 500px; /* 记住一定要设置高度哦！*/
}

/* 滚动条样式 */
.scroll-container {  
    overflow: hidden;  
    overflow-y: auto;  
}  
.scroll-container::-webkit-scrollbar-track-piece {  
    background-color: rgba(0, 0, 0, 0);  
    border-left: 1px solid rgba(0, 0, 0, 0);  
}  
.scroll-container::-webkit-scrollbar {  
    width: 5px;  
    height: 13px;  
    -webkit-border-radius: 5px;  
    -moz-border-radius: 5px;  
    border-radius: 5px;  
}  
.scroll-container::-webkit-scrollbar-thumb {  
    background-color: rgba(0, 0, 0, 0.2);  
    background-clip: padding-box;  
    -webkit-border-radius: 5px;  
    -moz-border-radius: 5px;  
    border-radius: 5px;  
    min-height: 28px;  
}  
.scroll-container::-webkit-scrollbar-thumb:hover {  
    background-color: rgba(0, 0, 0, 0.2);  
    -webkit-border-radius: 5px;  
    -moz-border-radius: 5px;  
    border-radius: 5px;  
}