火狐下的滚动条样式无法去修改，但chorme下的则可以任意修改，惊喜的是IE竟然是最早实现这一功能的浏览器，IE5都能有效果。

chorme下的滚动条样式修改：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        /*滚动条整体部分,必须要设置*/

        ::-webkit-scrollbar{

            width: 10px;

            height: 10px;

            background-color: #333;

        }

        /*滚动条的轨道*/

        ::-webkit-scrollbar-track{

            box-shadow: inset 0 0 5px rgba(0,0,0,.3);

            background-color: #67687D;

        }

        /*滚动条的滑块按钮*/

        ::-webkit-scrollbar-thumb{

            border-radius: 10px;

            background-color: #DE6B90;

            box-shadow: inset 0 0 5px #000;

        }

        /*滚动条的上下两端的按钮*/

        ::-webkit-scrollbar-button{

            height: 10px;

            background-color: #B0AEDA;

        }

        div{width: 200px;height: 200px;overflow: auto;padding: 20px;}

    </style>

</head>

<body>

    <div id="div1"> scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离</div>

</body>

</html>

IE下的滚动条样式修改跟chrome下的不一样，而且只能修改颜色。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        div{

            width: 200px;

            height: 200px;

            padding: 20px;

            overflow: auto;

            /*三角箭头的颜色*/

            scrollbar-arrow-color: #f00;

            /*滚动条滑块按钮的颜色*/

            scrollbar-face-color: #ff0;

            /*滚动条整体颜色*/

            scrollbar-highlight-color: #333;

            /*滚动条阴影*/

            scrollbar-shadow-color: #ccc;

            /*滚动条轨道颜色*/

            scrollbar-track-color: #666;

        }

    </style>

</head>

<body>

    <div id="div1"> scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离</div>

</body>

</html>

chrome和IE下的滚动条样式修改的更多相关文章

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

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

  2. scroll滚动条样式修改

    一般我们有两种情况会出现滚动条,一种是overflow,一种是使用scroll. 当我们需要改变这个滚动条样式的时候,我们需要做以下的修改: html: <div id="style- ...

  3. 前端给div加滚动条样式修改

    <!DOCTYPE html> <html lang="en">       <head>             <meta chars ...

  4. HTML 滚动条样式修改

    <style> .innerbox{ overflow-y: auto; background-color: #f8f8f8; height: 200px; padding: 10px; ...

  5. css滚动条样式修改

    .activeMoreBankList{ height: 188px; overflow-y: auto;} /*滚动条样式*/.activeMoreBankList::-webkit-scrollb ...

  6. select 下拉框样式修改 option文字居右

    select { direction: rtl; /*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/ border: solid 1px #000; /*很关键:将默认的sele ...

  7. webkit浏览器下改变滚动条样式

    /*定义滚动条轨道 内阴影+圆角*/ ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); ba ...

  8. 在ie和chrome浏览器中滚动条样式的设置

    1.IE下设置滚动条样式的属性 scrollbar-arrow-color: color; /*三角箭头的颜色*/scrollbar-face-color: color; /*立体滚动条的颜色(包括箭 ...

  9. CSS自定义滚动条样式

    原文地址:http://www.qianduan.net/css-custom-scroll-bar-style/ 相信很多人都遇到过在设计中自定义滚动条样式的情景,之前我都是努力说服设计师接受浏览器 ...

随机推荐

  1. CentOS 7 安装MySQL 8.0.11

    1. 下载安装包 wget https://cdn.mysql.com//Downloads/MySQL-8.0/mysql-8.0.13-1.el7.x86_64.rpm-bundle.tar 下载 ...

  2. LeetCode134：Gas Station

    题目: There are N gas stations along a circular route, where the amount of gas at station i is gas[i]. ...

  3. [javascript]IIFE立即执行的函数表达式

    近况:最近一直忙着找实习没有更新,不过学习还是在继续的.最近在写Node.js又稍带把javascript的角落知识捡了一遍,过半个月打算去看看python和一些CSS深层的书和博客.工作找的还好,拿 ...

  4. php类模块引擎PDO操作MySQL数据库简单阐述

    PDO是什么呢? 通俗说就是别人写的一个“数据库操作工具类”,它非常强大,可以应对市面上几乎所有主流数据库, 具体应用时候有这样一个关系: 即,要操作某种数据,就得去“打开”对应的pdo引擎. 在ph ...

  5. ABP框架入门踩坑-使用MySQL

    使用MySQL ABP踩坑记录-目录 起因 因为我自用的服务器只是腾讯云1核1G的学生机,不方便装SQL Server,所以转而MySQL. 这里使用的MySQL版本号为 8.0. 解决方案 删除Qi ...

  6. 消息中间件（Kafka/RabbitMQ）收录集

    https://blog.csdn.net/u013256816/article/details/54743481

  7. LD算法的C++实现(基于编辑距离的文本比较算法)

    算法看这里: http://www.cnblogs.com/grenet/archive/2010/06/01/1748448.html 用数组实现: #include <iostream> ...

  8. 【转】Bri's改装笔记

    网上关于三菱蓝瑟的改装方案的文章不少,但在以不换发动机为前提的理性改装确是这两篇和东南汽车俱乐部科仔的那篇<4G18的低成本NA玩法>最具参考价值. 小排量NA车的乐趣不在于跟人比直线加速 ...

  9. for循环、for in整理

    for循环 作用:按照一定的规律,重复去做某件事情,此时我们就需要使用循环来处理了 例子1:倒着输出每一项 <script type="text/javascript"> ...

  10. LOJ#3086. 「GXOI / GZOI2019」逼死强迫症（矩阵快速幂）

    题面 传送门 题解 先考虑全都放\(1\times 2\)的方块的方案,设防\(i\)列的方案数为\(g_i\),容易推出\(g_i=g_{i-1}+g_{i-2}\),边界条件为\(g_0=g_1= ...