前言

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

　　　比如我博客的滚动条，自定义滚动条样式和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. PHP 扩展与 ZEND 引擎的整合

    PHP 扩展是对 PHP 功能的一个补充,编写完 PHP 扩展以后, ZEND 引擎需要获取到 PHP 扩展的信息,比如 phpinfo() 函数是如何列出 PHP 扩展的信息,PHP 扩展中的函数如 ...

  2. 一文告诉你，Kafka在性能优化方面做了哪些举措！

    很多粉丝私信问我Kafka在性能优化方面做了哪些举措,对于相关问题的答案其实我早就写过了,就是没有系统的整理一篇,最近思考着花点时间来整理一下,下次再有粉丝问我相关的问题我就可以潇洒的甩个链接了.这个 ...

  3. c#日期和时间戳互转

    using System; using System.Collections.Generic; using System.Data; using System.Reflection; namespac ...

  4. 7个Python小坑，给新手党的福利

    Python语言简单易用,但容易给新入门的朋友造成一些微妙的,难以捕捉的错误,稍不注意就入坑了. 因此,今天给大家总结一些易犯的小错误,让你轻松进行不踩坑的Python学习. 1.缩进,符号和空格不正 ...

  5. java基础第十四篇之Map

    一,Map集合的特点: *  * 1.Map集合和Collection集合,没有关系 *  * 2.Map集合的元素是成对存在(夫妻关系) *         Collection集合的元素是独立存在 ...

  6. v8js-在PHP中运行javascript代码

    起因之前写自动登录操作一个网站的PHP脚本,但是发现该网站用js代码做了cookie的计算和验证,所以使用了v8js. 安装安装v8.(Mac:brew install v8)使用pecl insta ...

  7. SourceInsight教程

    概述: Source Insight是一个面向项目开发的程序编辑器和代码浏览器,它拥有内置的对C/C++, C#和Java等程序的分析.Source Insight能分析你的源代码并在你工作的同时动态 ...

  8. Day_03

    1.指针基本操作 package main import "fmt" func main() { var a int //每个变量有2层含义:变量的内存,变量的地址 fmt.Pri ...

  9. 不能聚焦元素问题 WebDriverException: Message: unknown error: cannot focus element

    上周碰到了 Unable to locate element,即“无法定位元素”,后靠两行代码解决: wait = ui.WebDriverWait(driver,5) wait.until(lamb ...

  10. 初学JavaScript正则表达式(九)

    分组:可以用 ( ) 来进行分组 一.Byron重复三次             Byron{3} --------- Byronnn 只是将紧挨着量词的字符重复            (Byron) ...