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 条评论
登录 后参与评论

相关文章

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

普通表格常见设置

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

2141
来自专栏JetpropelledSnake

Linux学习笔记之Xshell配色方案定制

点击 Browse 按钮,弹出如下面板,选择 ANSI Colors on Black,然后点击右侧save as 按钮,命名为 zkl。

1.1K1
来自专栏python学习路

一、HTML

html概述和基本结构 html概述 HTML是 HyperText Mark-up Language 的首字母简写,意思是超文本标记语言,超文本指的是超链接,...

1.5K4
来自专栏小筱月

onload 和 domready

window.onload 事件会在页面或图像加载完成后触发(即所有元素的资源都下载完毕)

2072
来自专栏岑志军的专栏

ReactNative-综合案例(01)

1443
来自专栏vue学习

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

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

1942
来自专栏练小习的专栏

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

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

2406
来自专栏我和未来有约会

动态创建Storyboard

做动画或者做控件的时候不一定都要在xaml里做Storyboard,有时候在代码里动态创建会更加灵活些。 这里以我做的一个改变颜色的Storyboard为例来做...

3674
来自专栏AndroidTv

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

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

1992
来自专栏小巫技术博客

A017-布局之FrameLayout

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

1143

扫码关注云+社区

领取腾讯云代金券