火狐下的滚动条样式无法去修改，但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. arduino远程刷新（烧录）固件

    在车间部署了十几个网络版的温湿度采集器(基于arduino的),这些采集器分布在不同的地方,现在要更新一下上面的固件.最笨的方法是一个一个地取下来,插到电脑的USB接口上进行固件更新,这样做显然很麻烦 ...

  2. DevOps Workshop 研发运维一体化（北京第二场） 2016.04.27

    北京不亏为首都,人才济济,对微软DevOps解决方案感兴趣的人太多.我们与微软公司临时决定再家一场培训. 我之前在博客中(DevOps Workshop 研发运维一体化第一场(微软亚太研发集团总部)h ...

  3. 使用ABP框架踩过的坑系列4

    数据库连接和事务管理,是数据库应用中的最重要概念之一.做过的人,都会头疼:何时Open一个连接?何时Start一个事务?何时Dispose这个连接?... ABP框架试图用一个叫做UnitOfWork ...

  4. K8S+GitLab-自动化分布式部署ASP.NET Core(三) 更新镜像版本并部署到K8S上

    一.介绍 前一篇,介绍了ASP.NET Core部署到K8S上,下面介绍我们在发布新一版本中怎么通过Gitlab CI自动给镜像打版本并部署到K8S上. 二.我们通过GitLab CI/CD 变量 不 ...

  5. C#通过盘符获取剩余空间

    public static long GetHardDiskSpace(string str_HardDiskName) { ; str_HardDiskName = str_HardDiskName ...

  6. LINQ to SQL语句大全

    LINQ to SQL语句大全     LINQ to SQL语句(1)之Where 适用场景:实现过滤,查询等功能. 说明:与SQL命令中的Where作用相似,都是起到范围限定也就是过滤作用的,而判 ...

  7. With语句上下文管理

    在平时工作中总会有这样的任务,它们需要开始前做准备,然后做任务,然后收尾清理....比如读取文件,需要先打开,读取,关闭 这个时候就可以使用with简化代码,很方便 1.没有用with语句 1 2 3 ...

  8. git install

    wget -O git-master.zip https://codeload.github.com/git/git/zip/master unzip git-master.zip cd git-ma ...

  9. 一，php的错误处理和异常处理

    php程序中如果语法或逻辑错误,会引起php默认错误处理机制,不会引起异常处理机制,只有在程序中throw抛出异常后,如果没有catch捕捉异常,默认调用php默认异常处理. php有默认错误机制和默 ...

  10. 【7】JMicro微服务-服务路由，负载均衡

    如非授权,禁止用于商业用途,转载请注明出处作者:mynewworldyyl   1.关于服务路由和负载均衡 服务路由:根据预先配置好的策略,为客户端选择一个当前可用的服务提供者,根据策略选择一个可用的 ...