设置滚动条样式
因为在模拟开发冒险岛2游戏官网的时候,遇到一个关于滚动条样式设置的问题,如果我们不设置滚动条的样式,那么如下图所示:(特别丑陋)
但是在冒险岛的官网上呈现的样式却是:
明显感觉到视觉上的不同,那么现在我们就来设置滚动条的样式:
在所有浏览器，滚动条可定制性最强的当属webkit内核的浏览器了。因为源代码开放的原因，市面上基于webkit内核的浏览器也是很难穷举完。例如有：Google Chrome、Opera（opera最近宣布使用webkit内核了）、360极速浏览器，猎豹浏览器等，搜狗浏览器······
下面我们来看一下webkit浏览器是如何强大的吧！首先来了解它的属性:
滚动条的设置
1. ::-webkit-scrollbar 滚动条整体部分，可以设置宽度等
2. ::-webkit-scrollbar-button 滚动条两端的按钮
3. ::-webkit-scrollbar-track 外层轨道
4. ::-webkit-scrollbar-track-piece 内层滚动槽
5. ::-webkit-scrollbar-thumb 滚动的滑块
6. ::-webkit-scrollbar-corner 边角
7. ::-webkit-resizer 定义右下角拖动块的样式
::-webkit-scrollbar ：滚动条整体部分，其中的属性: width,height,background,border等。
::-webkit-scrollbar-button ：滚动条两端的按钮。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。
::-webkit-scrollbar-track ：外层轨道。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。
::-webkit-scrollbar-track-piece ：内层轨道，具体区别看下面gif图，需要注意的就是它会覆盖第三个属性的样式。
::-webkit-scrollbar-thumb ：滚动条里面可以拖动的那部分
::-webkit-scrollbar-corner ：边角，两个滚动条交汇处
::-webkit-resizer ：两个滚动条交汇处用于拖动调整元素大小的小控件（基本用不上）
下面举一个简单的例子来说明:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>标题</title>
<style>
p {
width: 100px;
height: 300px;
border: 2px solid red;
overflow-x: scroll;
overflow-y: scroll;
}
/* 设置滚动条的样式 */
::-webkit-scrollbar {
width:12px;
background-color: aqua;
}
/* 滚动槽 */
::-webkit-scrollbar-track {
border-radius:10px;
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
border-radius:10px;
background:black;
}
</style>
</script>
</head>
<body>
<p id="p1">
请选择Webkit内核的浏览器才可以正常的看到滚动条的变化。小天地，大世界是一个Web前端的技术博客。 主要是关于HTML 5,CSS 3,javaScript,JQuery等。除此之外，还包含一些PHP语言等的实用例子。请选择Webkit内核的浏览器才可以正常的看到滚动条的变化。小天地，大世界是一个Web前端的技术博客。 主要是关于HTML 5,CSS 3,
JavaScript,JQuery等。除此之外，还包含一些PHP语言等的实用例子。请选择Webkit内核的浏览器才可以正常的看到滚动条的变化。小天地，大世界是一个Web前端的技术博客。 主要是关于HTML 5,CSS 3,JavaScript,JQuery等。除此之外，还包含一些PHP语言等的实用例子。请选择Webkit内核的浏览器才可以正常的看到滚动条的变化。
小天地，大世界是一个Web前端的技术博客。 主要是关于HTML 5,CSS 3,JavaScript,JQuery等。除此之外，还包含一些PHP语言等的实用例子。请选择Webkit内核的浏览器才可以正常的看到滚动条的变化。小天地，大世界是一个Web前端的技术博客。 主要是关于HTML 5,CSS 3,JavaScript,JQuery等。除此之外，还包含一些PHP语言等的
实用例子。请选择Webkit内核的浏览器才可以正常的看到滚动条的变化。小天地，大世界是一个Web前端的技术博客。 主要是关于HTML 5,CSS 3,JavaScript,JQuery等。除此之外，还包含一些PHP语言等的实用例子。请选择Webkit内核的浏览器才可以正常的看到滚动条的变化。小天地，大世界是一个Web前端的技术博客。 主要是关于HTML 5,CSS 3,JavaScript,JQuery等。除此之外，还
包含一些PHP语言等的实用例子。请选择Webkit内核的浏览器才可以正常的看到滚动条的变化。小天地，大世界是一个Web前端的技术博客。 主要是关于HTML 5,CSS 3,JavaScript,JQuery等。除此之外，还
包含一些PHP语言等的实用例子。请选择Webkit内核的浏览器才可以正常的看到滚动条的变化。小天地，大世界是一个Web前端的技术博客。 主要是关于
HTML 5,CSS 3,JavaScript,JQuery等。除此之外，还包含一些PHP语言等的实用例子。请选择Webkit内核的浏览器才可以正常的看到滚动条的变化。
小天地，大世界是一个Web前端的技术博客。 主要是关于HTML 5,CSS 3,JavaScript,JQuery等。除此之外，还包含一些PHP语言等的实用例子。请选择Webkit内核的浏览器才可以正常的看到滚动条的变化。
小天地，大世界是一个Web前端的技术博客。 主要是关于请选择Webkit内核的浏览器才可以正常的看到滚动条的变化。请选择Webkit内核的浏览器才可以正常的看到滚动条的变化。
小天地，大世界是一个Web前端的技术博客。 主要是关于
HTML 5,CSS 3,JavaScript,JQuery等。除此之外，还
包含一些PHP语言等的实用例子。
小天地，大世界是一个Web前端的技术博客。 主要是关于
HTML 5,CSS 3,JavaScript,JQuery等。除此之外，还
包含一些PHP语言等的实用例子。
HTML 5,CSS 3,JavaScript,JQuery等。除此之外，还
包含一些PHP语言等的实用例子。
</p>
</body>
</html>得到的效果是:
接着便是对我们的冒险岛的滚动条进行设置:
/*
滚动条的设置
::-webkit-scrollbar 滚动条整体部分，可以设置宽度啥的
::-webkit-scrollbar-button 滚动条两端的按钮
::-webkit-scrollbar-track 外层轨道
::-webkit-scrollbar-track-piece 内层滚动槽
::-webkit-scrollbar-thumb 滚动的滑块
::-webkit-scrollbar-corner 边角
::-webkit-resizer 定义右下角拖动块的样式
*/
::-webkit-scrollbar {
width: 6px;
background-color: #181c32;
}
::-webkit-scrollbar-thumb {
background-color: #5a76cd;
}
只需要简单的设置滚动条的颜色以及大小,和滚动条里面拖动的部分就可以实现功能了.
最后实现的功能就是这样.
但是一定注意:IE8设置滚动条的与这里不一样。
scrollbar-arrow-color: color; /*三角箭头的颜色*/
scrollbar-face-color: color; /*立体滚动条的颜色（包括箭头部分的背景色）*/
scrollbar-3dlight-color: color; /*立体滚动条亮边的颜色*/
scrollbar-highlight-color: color; /*滚动条的高亮颜色（左阴影？）*/
scrollbar-shadow-color: color; /*立体滚动条阴影的颜色*/
scrollbar-darkshadow-color: color; /*立体滚动条外阴影的颜色*/
scrollbar-track-color: color; /*立体滚动条背景颜色*/
scrollbar-base-color:color; /*滚动条的基色*/这就是简单的修改滚动条样式的方法！！！
相关阅读
方法一：（不能微调）position:absolute;left:0; right:0; top:0; bottom:0;margin:auto;方法二：（可微调）position:absolute;top:50%; left
<table border="1" width="400px" height="200px"> <caption>完整table</caption> //标题 <thead> <tr> <th
css3 深刻认识border-color和border-radius的属性
1.border-radius 属性: 我们先看看下面的图片： 如果你们看到这个图片该怎么写的？先思考一下 代码如下： .box{ width: 20
element.style的样式问题： 我们在调整页面样式的时候总会看见element.style中有一些样式会把我们自己的样式覆盖掉。 这种一般
实现流程： p => 内容缩小，边框加粗 => 内容缩小为0 =>把下边框去掉，剩下上，左，右边框 => 设置左右边框为透明 .className::after