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

相关文章

来自专栏葡萄城控件技术团队

Silverlight 结构分析

Silverlight是微软提供的一种Web前端应用程序开发框架,是微软RIA的主要应用程序开发平台。Silverlight以浏览器的插件方式,提供丰富的多媒体...

1798
来自专栏yuezhongbao积累

移动端bug汇总(一)

Q: 当你点击一个链接或者通过Javascript定义的可点击元素的时候,它就会出现一个半透明的灰色背景。

34713
来自专栏木子昭的博客

Python综合Web案例_在线为头像添加装饰第二步:上传头像, 并实时裁剪第三步: 生成图片,长按保存

前几天元旦, 用Python为自家公众号做了一个"革面"的活动页面,活动的效果非常好,分享一下实现过程 前端: BootStrap, Jquery, Jcro...

2846
来自专栏移动开发之家

Weex原理之带你去蹲坑

 本篇将节操满满的安利Weex(˶‾᷄ ⁻̫ ‾᷅˵),不一样的角度推荐你入坑,官网有的我们不拖泥,这里将给你补充官方没有的,深入到蹲坑给你排忧解难,总会给你点...

882
来自专栏web前端-

Swiper开篇

 swiper是一款轻量级以及免费的移动设备触控滑块的js框架,主要运用于移动端的操作,但也可以用于pc端页面效果制作,完全的开源免费,

692
来自专栏Java Web

SpringBoot技术栈搭建个人博客【前台开发/项目总结】

先吐槽一句..写页面是真的不擅长,然后限于时间的问题,我开始考虑换用Bootstrap来完成页面的编写,因为时间有限(我得在实习完之前把所有页面开发完),学习V...

1774
来自专栏古时的风筝

最简单的数据抓取教程,人人都用得上

Web Scraper 是一款免费的,适用于普通用户(不需要专业 IT 技术的)的爬虫工具,可以方便的通过鼠标和简单配置获取你所想要数据。例如知乎回答列表、微...

4428
来自专栏Coco的专栏

【技巧篇】解决悬浮的<header>、<footer>遮挡内容的处理技巧

1435
来自专栏React Native开发圈

React Native使用百度Echarts显示图表

首先需要在我们的React Native项目中安装native-echarts组件,该组件是兼容IOS和安卓双平台的。

1251
来自专栏Java Web

SpringBoot技术栈搭建个人博客【前台开发/项目总结】Bootstrap or Vue?前台页面分析后台页面分析项目总结

1603

扫码关注云+社区