实现相亲源码功能，从优化滚动条开始

最新推荐文章于 2024-09-04 00:14:28 发布

云豹科技晓彤

最新推荐文章于 2024-09-04 00:14:28 发布

阅读量96

点赞数

分类专栏：婚恋交友源码文章标签： css3 css html

原文链接：https://juejin.cn/post/7041076781746487304

版权

婚恋交友源码专栏收录该内容

67 篇文章 0 订阅

订阅专栏

本文介绍了如何使用CSS3的-webkit属性来优化网页中的滚动条样式，通过设置滚动条的宽度、滑块颜色、圆角等实现自定义效果。同时提到了Firefox和IE的滚动条样式设置，并给出了全局滚动条样式的Less代码示例。

摘要由CSDN通过智能技术生成

滚动条是相亲源码中时常会看到的样式，那么滚动条如何进行优化呢。举个例子，下面这个视频播放列表很长，使用 overflow: auto; 显示的是默认样式滚动条，其实也挺好看

但产品就是想优化一下，做成下面这种效果

怎么办？那就调一下呗，把他娘的意大利炮拉出来，不，把鼎鼎大名的 -webkit 请出来

webkit

这个列表盒子上有一个类.list-box

-webkit-scrollbar

必须项
作用：控制滚动条的宽度

.list-box::-webkit-scrollbar {
    width: 10px;
    // height: 10px; // 高度写不写，都不影响，因为会根据内容的长度自动计算
}
复制代码

-webkit-scrollbar-thumb

必须项
作用：控制滚动条滑块的颜色、圆角、内阴影等

.list-box::-webkit-scrollbar {
    width: 10px;
    // height: 10px; // 高度写不写，都不影响，因为会根据内容的长度自动计算
}

.list-box::-webkit-scrollbar-thumb {
    background: #ccc; // 滑块颜色
    border-radius: 5px; // 滑块圆角
}

.list-box::-webkit-scrollbar-thumb:hover {
    background: #f40; // 鼠标移入滑块变红
}

-webkit-scrollbar-track

默认不显示滚动条的轨道

非必须项
作用：控制滚动条的轨道的圆角、内阴影等

.list-box::-webkit-scrollbar {
    width: 10px;
    // height: 10px; // 高度写不写，都不影响，因为会根据内容的长度自动计算
}

.list-box::-webkit-scrollbar-thumb {
    background: #ccc; // 滑块颜色
    border-radius: 5px; // 滑块圆角
}

.list-box::-webkit-scrollbar-thumb:hover {
    background: #f40; // 鼠标移入滑块变红
}

.list-box::-webkit-scrollbar-track {
    border-radius: 10px; // 轨道圆角
    background-color: #1890ff // 轨道颜色 
}

Firefox

scrollbar-width

scrollbar-color

IE

scrollbar-base-color

scrollbar-track-color

scrollbar-arrow-color

scrollbar-3dlight-color

scrollbar-shadow-color

scrollbar-highlight-color

全局滚动条样式美化

相亲源码里一般都会有一个设置全局样式的less文件

// common.less
*::-webkit-scrollbar {
    width: 10px;
    // height: 10px; // 高度写不写，都不影响，因为会根据内容的长度自动计算
}

*::-webkit-scrollbar-thumb {
    background: #ccc; // 滑块颜色
    border-radius: 5px; // 滑块圆角
}

// 兼容Firefox、IE
* {
    scrollbar-width: 10px;
    scrollbar-base-color: green;
    scrollbar-track-color: red;
    scrollbar-arrow-color: blue;
}

这样，相亲源码就实现了滚动条样式的优化。
声明：本文由云豹科技转发自Jesse90s博客，如有侵权请联系作者删除