在您开始建立自己的，感觉应该先录一个概念：内核的浏览器。

兼容性问题之前多次提及，而在平时经常会遇到兼容性问题。原因，就在于它：浏览器内核。这是比較通俗的说法，事实上应该把它描写叙述的专业点：Rendering Engine解释引擎。它负责网页语法进行解释，并对其内容和格式进行渲染（就是显示，用个词就感觉专业好多），而不同浏览器内核对网页语法的解释是不同的，就造成了所谓的“兼容问题”。

这里不多谈兼容的问题。但明确其原因。知晓其解决的一些办法就好了，而解决的最好办法就是，针对不同的内核编写不同的代码，当然针对详细的模块详细编写，这里先来介绍下浏览器内核的种类：

*Trident内核（IE内核）

*Gecko内核（Firefox内核）

*Webkit内核（Safari内核、chrome内核，开源）

*Blink内核（Google最新内核）

*Presto内核（Opera前内核）

而眼下我们最经常使用的则是前三种，所以我们现阶段进行编写的话主要针对上面三种内核的浏览器观察效果即可

言归正传。開始打造我们自己的专属滚动条，当然我们能够考虑不同的浏览器进行试验：

事实上，假设说是对一个滚动条最大的改变，就是一个：隐藏掉。从有到无，无中生有啊，差点儿质的改变，我们不得不在这里提这么一下。

<span style="font-size:12px;">overflow:hidden;</span>

当然假设是ie内核的浏览器的话，<body scroll="no">是相同有效的，

宏观上我们掌握了，接下来我们就開始那些细微之处的雕琢了，对于ie内核浏览器：

<span style="font-size:12px;">scrollbar-arrow-color: red; /*三角箭头的颜色*/

scrollbar-face-color: white; /*立体滚动栏的颜色（包含箭头部分的背景色）*/

scrollbar-3dlight-color: color; /*立体滚动栏亮边的颜色*/

scrollbar-highlight-color: red; /*滚动栏的高亮颜色（左立体边颜色）*/

scrollbar-shadow-color: red; /*立体滚动栏阴影的颜色*/

scrollbar-darkshadow-color: blue; /*立体滚动栏外阴影的颜色*/

scrollbar-track-color: yellow; /*立体滚动栏背景颜色*/

</span>

这样我们来看下。滚动栏成什么样子呢

仅仅是颜色上的一些变化。着实让人有些失望啊，可是你可知道它有多久了，从ie5.5到如今已是沧海桑田啊，我们能够为今天的漂亮来放弃过往的破旧。可是却不得不尊重那个以前从无到有的惊艳。

接下来，我们来编写下webkit以下的滚动条设定

<span style="font-size:12px;">body::-webkit-scrollbar{//滚动栏的总体部分

	background-color: yellow;

	width:100px;

}

body::-webkit-scrollbar-button{//滚动栏两端的按钮，display：none相同能够设定的

	background-color: red;

}

body::-webkit-scrollbar-track{//外层轨道

	background-color: blue;

}

body::-webkit-scrollbar-track-piece{//内层轨道。也就是滚动背景

	background-color: green;

}

body::-webkit-scrollbar-thumb {//滚动栏里拖动部分

	background-color: orange;

	border-radius:10px;

}</span>

这样我们得到的又会是什么效果呢

有木有。有木有，我的如意金箍啊。要是上下再加上图画取代单调的色彩。是不是有些惊艳，有木有啊，当然我这个丑疯了。囧，至少它真的变了....

资料查询到，还有好多的伪元素能够实现这个功能，js、jquery相同能够实现这个，只是这里就不多说了，先让我偷乐会.....

哈，有点困了额。晚安

版权声明：本文博主原创文章。博客，未经同意不得转载。

不一样的是不一样的，我的独家滚动条------Day35的更多相关文章

  1. CSS3 background-image背景图片相关介绍

    这里将会介绍如何通过background-image设置背景图片,以及背景图片的平铺.拉伸.偏移.设置大小等操作. 1. 背景图片样式分类 CSS中设置元素背景图片及其背景图片样式的属性主要以下几个: ...

  2. js学习笔记：操作iframe

    iframe可以说是比较老得话题了,而且网上也基本上在说少用iframe,其原因大致为:堵塞页面加载.安全问题.兼容性问题.搜索引擎抓取不到等等,不过相对于这些缺点,iframe的优点更牛,跨域请求. ...

  3. iOS总结_UI层自我复习总结

    UI层复习笔记 在main文件中,UIApplicationMain函数一共做了三件事 根据第三个参数创建了一个应用程序对象 默认写nil,即创建的是UIApplication类型的对象,此对象看成是 ...

  4. 理解CSS视觉格式化

    前面的话   CSS视觉格式化这个词可能比较陌生,但说起盒模型可能就恍然大悟了.实际上,盒模型只是CSS视觉格式化的一部分.视觉格式化分为块级和行内两种处理方式.理解视觉格式化,可以确定得到的效果是应 ...

  5. JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome

    今天为大家分享一下我自己制作的浏览器滚动条,我们知道用css来自定义滚动条也是挺好的方式,css虽然能够改变chrome浏览器的滚动条样式可以自定义,css也能够改变IE浏览器滚动条的颜色.但是css ...

  6. 【知识必备】内存泄漏全解析，从此拒绝ANR，让OOM远离你的身边，跟内存泄漏say byebye

    一.写在前面 对于C++来说,内存泄漏就是new出来的对象没有delete,俗称野指针:而对于java来说,就是new出来的Object放在Heap上无法被GC回收:而这里就把我之前的一篇内存泄漏的总 ...

  7. 看完SQL Server 2014 Q/A答疑集锦:想不升级都难！

    看完SQL Server 2014 Q/A答疑集锦:想不升级都难! 转载自:http://mp.weixin.qq.com/s/5rZCgnMKmJqeC7hbe4CZ_g 本期嘉宾为微软技术中心技术 ...

  8. ASP.NET Aries 入门开发教程6：列表数据表格的格式化处理及行内编辑

    前言: 为了赶进度,周末也写文了! 前几篇讲完查询框和工具栏,这节讲表格数据相关的操作. 先看一下列表: 接下来我们有很多事情可以做. 1:格式化 - 键值的翻译 对于“启用”列,已经配置了格式化 # ...

  9. 通俗易懂的来讲讲DOM

    DOM是所有前端开发每天打交道的东西,但是随着jQuery等库的出现,大大简化了DOM操作,导致大家慢慢的“遗忘”了它的本来面貌.不过,要想深入学习前端知识,对DOM的了解是不可或缺的,所以本文力图系 ...

  10. CSS十问——好奇心+刨根问底=CSSer

    最近有时间,想把酝酿的几篇博客都写出来,今天前端小学生带着10个问题,跟大家分享一下学习CSS的一些体会,我觉得想学好CSS,必须保持一颗好奇心和刨根问底的劲头,而不是复制粘贴,得过且过.本人能力有限 ...

随机推荐

  1. [iOS]iOS8可用的识别用户方式（idfa、UUID、idfv）

    本文地址:http://blog.csdn.net/zhaoyabei/article/details/46682765 想要追踪.统计用户,自然离不开用户唯一标识符.这是每一个公司都面临的问题.在历 ...

  2. 【Android】应用启动画面

    几乎所有的Android应用程序都会有一个启动画面,展示自己的LOGO,本版信息,或者更人性化一点的,在很长的加载信息中,变换一些显示的文字等,让无聊的等待时间添加点调味剂. 具体实现来说,应该创建一 ...

  3. Windows Phone开发（43）：推送通知第一集——Toast推送

    原文:Windows Phone开发(43):推送通知第一集--Toast推送 好像有好几天没更新了,抱歉抱歉,最近"光荣"地失业,先是忙于寻找新去处,唉,暂时没有下文.而后又有一 ...

  4. KMP求字符串最小循环节

    证明1: 对于一个字符串S,长度为L,如果由长度为len的字符串s(字符串s的最小循环节是其本身)循环k次构成,那么字符串s就是字符串S的最小循环节 那么字符串有个很重要的性质和KMP挂钩,即  i ...

  5. hdu 1395 2^x mod n = 1 暴力过~~最好学下欧拉定理~~~

    2^x mod n = 1 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) To ...

  6. [Unity3D]转让Android介面

    简单介绍 有一些手机功能.Unity没有提供对应的接口.比如震动,比如不锁屏,比如GPS.比如... 有太多的特殊功能Unity都没有提供接口.这时候,我们就须要通过使用Android原生的ADT编辑 ...

  7. BZOJ 2783 JLOI 2012 树 乘+二分法

    标题效果:鉴于一棵树和一个整数s,问中有树木几个这样的路径,点和担保路径＝＝s,深度增量点. 这一数额的输出. 思维:用加倍的想法,我们可以O(logn)在时间找点他第一n.因为点权仅仅能是正的,满足 ...

  8. JDK源码学习系列05----LinkedList

                                             JDK源码学习系列05----LinkedList 1.LinkedList简介 LinkedList是基于双向链表实 ...

  9. BST树，B树、B-树、B+树、B*树

    BST树,B树.B-树.B+树.B*树 二叉搜索树(BST): 1.所有非叶子结点至多拥有两个儿子(Left和Right): 2.所有结点存储一个关键字: 3.非叶子结点的左指针指向小于其关键字的子树 ...

  10. T-SQL基础(2) - 单表查询

    开窗函数over select orderid, custid, val, SUM(val) over() as totalvalue, SUM(val) over(partition by cust ...