前端滚动条样式修改

最新推荐文章于 2024-05-17 04:04:51 发布

兢兢业业程序员

最新推荐文章于 2024-05-17 04:04:51 发布

阅读量1.7k

点赞数 1

本文链接：https://blog.csdn.net/weixin_41587194/article/details/79232240

版权

在项目中，为了界面的美观度，常常会对滚动条样式的一些要求，在这里记录一下自己在项目中的解决方法：

<!DOCTYPE html>
<html>
    <head>
        <style>
            .scrollContent{
                border:1px solid #ddd;
                width: 200px;
                height: 50px;
                padding: 10px;
                overflow-y: auto;
            }
            .scrollContent::-webkit-scrollbar-track-piece {
                background-color:#f5f5f5;
            }
            .scrollContent::-webkit-scrollbar {
                width:8px;
                height:8px;
            }
            .scrollContent::-webkit-scrollbar-thumb {
                background-color:#c2c2c2;
                background-clip:padding-box;
                min-height:28px;
            }

        </style>
    </head>
    <body>
        <div class="scrollContent">
            <div>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque commodi ea eius        exercitationem fugit harum impeditiste iure laboriosam laborum nisi, pariatur quasi          quibusdam repudiandae sequi, sit tempore temporibus vitae?Lorem ipsum dolor sit amet,       consectetur adipisicing elit. Ad adipisci animi architecto aut eum hic illum laborum nam       natus,nisi non obcaecati perspiciatis porro rem repellat repellendus soluta, temporibus       vitae.
            </div>
        </div>
    </body>
</html>

注意浏览器兼容性

兢兢业业程序员

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前端滚动条样式修改

在项目中，为了界面的美观度，常常会对滚动条样式的一些要求，在这里记录一下自己在项目中的解决方法：<!DOCTYPE html><html> <head> <style> .scrollContent{ border:1px solid #ddd; ...
复制链接

扫一扫