Skill丨如何利用代码美化网站滚动条?

如何摆脱臃肿的插件,简单代码美化网站滚动条

V站今天回想起以前模板也有美化滚动条,后来魔改魔改就没了,现在找出来分享出来。由于偏爱谷歌浏览器的简洁,感觉滚动条还是太宽了,用过改变滚动条粗细的插件,后来感觉还是自己修改的舒服,原来也可以放在网站的CSS样式文件中的,所以这种细细的滚动条是我的最爱!把下面的代码放到你网站的CSS样式文件中:

  1. /*---滚动条默认显示样式--*/
  2. ::-webkit-scrollbar-thumb{
  3. background-color:#018EE8;
  4. height:50px;
  5. outline-offset:-2px;
  6. outline:2px solid #fff;
  7.    -webkit-border-radius:4px;
  8. border: 2px solid #fff;
  9. }
  10. /*---鼠标点击滚动条显示样式--*/
  11. ::-webkit-scrollbar-thumb:hover{
  12. background-color:#FB4446;
  13. height:50px;
  14.    -webkit-border-radius:4px;
  15. }
  16. /*---滚动条大小--*/
  17. ::-webkit-scrollbar{
  18. width:8px;
  19. height:8px;
  20. }
  21. /*---滚动框背景样式--*/
  22. ::-webkit-scrollbar-track-piece{
  23. background-color:#fff;
  24.    -webkit-border-radius:0;
  25. }

无论是什么站点,都可以。只需要找到合理的位置添加即可!如果没有翻页的,或者有其他美化代码的,尽量不要用或二选一,避免网站CSS臃肿。

效果图:

原文链接:https://24bp.cn/708.html

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏腾讯云商业智能分析团队的专栏

普通表格常见设置

表格组件是以表格的形式展现数据的载体,表格可以绑定任意一查询的多个字段。根据是否给字段使用统计函数来区分,可划分为细节数据表格和汇总表格。

1061
来自专栏刘望舒

React Native组件(三)Text组件解析

前言 此前介绍了最基本的View组件,接下来就是最常用的Text组件,对于Text组件的一些常用属性,这篇文章会给出简单的例子以供学习。 1 概述 Text组...

2186
来自专栏AndroidTv

前端入门2-HTML标签声明正文-HTML标签

作为一个前端小白,入门跟着这四个来源学习,感谢作者的分享,在其基础上,通过自己的理解,梳理出的知识点,或许有遗漏,或许有些理解是错误的,如有发现,欢迎指点下。

702
来自专栏vue学习

微信小程序日常踩坑后的总结(猜测你也会遇到,持续更新。。。)

(1)图片需是本地图片或者是路径为https的网络图片; (2)使用网络图片要用wx.downloadFile( )下载,否则真机上无法显示图片; (3)w...

1192
来自专栏岑志军的专栏

ReactNative-综合案例(01)

1143
来自专栏河湾欢儿的专栏

选中分享

651
来自专栏知道一点点

【原创】bootstrap框架的学习 第七课 -[bootstrap表格]

<!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 基本的表格</title> <link hr...

1042
来自专栏小巫技术博客

A017-布局之FrameLayout

帧布局,是所有布局容器中最简单的一种,控件定义在FrameLayout中默认放置在左上角,定义在后面的控件会层叠在前面定义的控件之上,所以才会被称为帧布局。

843
来自专栏练小习的专栏

css实现未知宽度的正方形需求

今天群里有哥们问了一下,百分比宽度的正方形如何用css实现。其实就是不定宽的正方形如何用css实现。 第一个方法利用图片的等比例缩放,用base64写一个1*1...

2066
来自专栏mySoul

文档和元素的几何滚动

当浏览器在窗口中渲染文档时,它将会创建文档一个视觉表现层,在哪里每个元素都有自己的位置和尺寸。通常web应用程序将文档看做元素的树。

1150

扫码关注云+社区