前言

　　　　最近总是看到某网站滚动条不是浏览器默认样式，而是自定义样式

　　　比如我博客的滚动条，自定义滚动条样式和hover前后的效果

　　　　

　　　　顿时来了兴致和有一个疑问，这是怎么实现的呢？

　　解决

　　　　

　　　　　  注：①：经测试，目前只支持webkit内核的浏览器，

　　　　　　　　 比如，谷歌，Safari，edge，360安全和360极速浏览器的极速模式，火狐，IE，opera等不支持

　　　　　　　　②：如上设置后浏览器默认的滚动条样式都会被修改，若不想样式作用于整个浏览器，

　　　　　　　　比如只想改变一个弹窗中超出内容后滚动条的样式可以在前面加上类 .element::-webkit-scrollbar

　　　　　　     ③：-webkit-scrollbar属性设置的滚动条宽为纵向滚动条的宽度，横向滚动条的高度

　　Demo

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

        <style>

            ::-webkit-scrollbar {

                /*改变纵向滚动条宽度*/

                width: 15px;

            }

            ::-webkit-scrollbar-track {

                /*改变滚动条轨道颜色*/

                border-radius: 10px;

                background-color: #F0F0F0;

                -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);

            }

            ::-webkit-scrollbar-thumb {

                /*改变滚动条滑轨相关的样式*/

                border-radius: 10px;

                background-color: #ccc;

            }

            /* 移入鼠标效果 */

            ::-webkit-scrollbar-thumb:hover {

                border-radius: 10px;

                background-color: #A3A3A3;

                -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);

            }

            div {

                font-size: 600px

            }

        </style>

    </head>

    <body>

        <div class="test1">666</div>

        <div class="test2">888</div>

        <div class="test3">999</div>

        <div class="container">

            <div class="test4">000</div>

        </div>

    </body>

</html>

　　参考原文：https://blog.csdn.net/qq_36763293/article/details/82779922

　　

CSS改变浏览器默认滚动条样式的更多相关文章

  1. css改变谷歌浏览器的滚动条样式

    详细内容请点击 /*---滚动条默认显示样式--*/ ::-webkit-scrollbar-thumb{        height:50px;    outline-offset:-2px;   ...

  2. css实现修改默认滚动条样式

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html><head&g ...

  3. css清除浏览器默认样式

    css清除浏览器默认样式(代替 *{}) 将代码放入 css 文件,使用 link 引入. /* v2.0 | 20110126 http://meyerweb.com/eric/tools/css/ ...

  4. CSS系列——浏览器默认样式

    了解HTML标签在各浏览器当中的默认样式,可以让我们了解,为什么会要写Reset.css,Reset.css当中要怎么写样式最合理.试着思考下面的问题: 为什么会有默认样式? 每个浏览器的默认样式有什 ...

  5. 【前端】webkit内核浏览器DIV滚动条样式修改和设置

    webkit内核浏览器DIV滚动条样式修改和设置 引言: 最近在做自己的小项目,为了设计出好看的页面费劲了心思,大到页面的整体布局,小到DIV的滚动条都不放过,以下是我通过查阅资料总结的webkit内 ...

  6. 设置cnblogs默认滚动条样式

    默认滚动条样式丑嘛就不谈了~这里修改为个性化滚动条样式. CSS代码 /*滚动条整体样式*/ body::-webkit-scrollbar { width: 10px; height: 1px; } ...

  7. css修改浏览器默认的滚动条样式

    //滚动条样式 ::-webkit-scrollbar { width: 10px; } /* 垂直滚动条的滑动块 */ ::-webkit-scrollbar-thumb:vertical { bo ...

  8. css 改变浏览器滚动条的样式

    /*滚动条样式*/ .innerbox::-webkit-scrollbar {/*滚动条整体样式*/ width: 4px; /*高宽分别对应横竖滚动条的尺寸*/ height: 4px; } .i ...

  9. css控制默认滚动条样式

    针对webkit内核的浏览器,使用伪类来改变滚动条的默认样式,详情如下: 滚动条组成部分 1. ::-webkit-scrollbar 滚动条整体部分 2. ::-webkit-scrollbar-t ...

随机推荐

  1. 【趣学程序】Linux上安装Tengine（Nginx）

    linux 安装tengine tengine是什么 tengine是由淘宝网发起的Web服务器项目.它在Nginx的基础上,针对大访问量网站的需求,添加了很多高级功能和特性.Tengine的性能和稳 ...

  2. Serlvet、JSP和JSTL的联系

    没有无缘无故的爱和恨,没有无缘无故的编程 前言: 想这世间,没有无缘无故的爱,也没有无缘无故的恨,一切都有有原因的,我想编程亦是如此,技术时常更新,程序员时常学习,随着时间的推移,程序员发际线的增高, ...

  3. 2018-8-10-win10-uwp-关联文件

    原文:2018-8-10-win10-uwp-关联文件 title author date CreateTime categories win10 uwp 关联文件 lindexi 2018-08-1 ...

  4. .net core入门-跨域访问配置

    Asp.net Core 跨域配置   一般情况WebApi都是跨域请求,没有设置跨域一般会报以下错误 No 'Access-Control-Allow-Origin' header is prese ...

  5. sql server pivot

    SET ANSI_NULLS ON GO SET QUOTED_IDENTIFIER ON GO CREATE TABLE [dbo].[YearSalary]( [year] [int] NULL, ...

  6. Python绘图还在用Matplotlib？out了 ！发现一款手绘可视化神器！

    前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. GitHub 地址:https://github.com/chenjian ...

  7. SIP协议分析

    - SIP流程 一个标准的SIP通话流程如下: 1. A向B发送一个INVITE消息,邀请B通话. 2.B振铃,向A回复一个RING消息,通知A振铃中,A等待. 3.B提机,向A发一个OK消息,  通 ...

  8. sftp-server 搭建编译

    下载开源代码 https://github.com/zwx230741/openssh-portable 编译 # autoconf # ./configure --prefix=xxx # make ...

  9. 多线程状态与优先级、线程同步与Monitor类、死锁

    一.线程状态 二.线程优先级 三.初步尝试多线程 class Program { static void Main(string[] args) { while (true) { MessagePri ...

  10. Java实现单词自定义排序|集合类、工具类排序、comparable、comparator接口

    课题 针对单词进行排序,先按字母的长度排序,长者在前: 在长度相等的情况下,按字典降序排序. 例如,有单词序列"apple banana grape orange",排序后输出结果 ...