火狐下的滚动条样式无法去修改，但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. Keil5编译STM32注意事项

    硬件:某STM32开发板,ST-Link/V2 一.硬件相关: 1.引脚连接: pin7 <-> SWIO pin9 <-> SWCLK pin20/pin18 <-&g ...

  2. jQuery基础【1】

    jQuery 是一个“写的更少,但做的更多”的轻量级 JavaScript 库.jQuery 极大地简化了 JavaScript 编程.jQuery 很容易学习.jQuery 库位于一个 JavaSc ...

  3. AgentJob--无法重启Job--22022错误

    错误描述: 发现有个Job计划为长期重复运行,但从某个时间点后未运行,无任何错误信息. 手动启动该Job后爆以下错误 运行环境: Window Server 2008 R2 Enterprise Mi ...

  4. ASP.NET MVC中设置跨域

    ASP.NET MVC中设置跨域 1.什么是跨域请求 js禁止向不是当前域名的网站发起一次ajax请求,即使成功respone了数据,但是你的js仍然会报错.这是JS的同源策略限制,JS控制的并不是我 ...

  5. 前端分享----JS异步编程+ES6箭头函数

    前端分享----JS异步编程+ES6箭头函数 ##概述Javascript语言的执行环境是"单线程"(single thread).所谓"单线程",就是指一次只 ...

  6. 如何优化代码中大量的if/else,switch/case?

    前言 随着项目的迭代,代码中存在的分支判断可能会越来越多,当里面涉及到的逻辑比较复杂或者分支数量实在是多的难以维护的时候,我们就要考虑下,有办法能让这些代码变得更优雅吗? 正文 使用枚举 这里我们简单 ...

  7. IBM主机家族——大型机、中型机、小型机

    对于x86架构的开放品台机器来说,IBM的封闭平台系列可以说是另一个“体系世界”. IBM z series    大型机, z/os操作系统 IBM i series/AS400   中型机,  i ...

  8. MySQL(增删改查补充)

    SQL语句数据行操作补充             create table tb12(                 id int auto_increment primary key,       ...

  9. Jmeter-正则表达式提取器获取token-小实例

    步骤一:在需要获取token的接口上,添加正则表达式提取器 说明: (1) Apply to:应用范围 Main sample and sub-samples:匹配范围包括当前父取样器并覆盖至子取样器 ...

  10. kali Linux 上编译并使用RFID核弹——proxmark3

    你还在在Windows下使用proxmark3?弱爆了! 本文作者:i春秋签约作家——冰尘 作为一个标准的日天日地日空气的(单身贵族泰迪)物理黑客Proxmark3这么高大上的东西应该是在键盘敲打声中 ...