css3滚动条样式及美化方法-Web全栈-创客学院
css3滚动条样式及美化方法
一,改变浏览器默认的滚动条样式
::-webkit-scrollbar-track-piece { //滚动条凹槽的颜色，还可以设置边框属性
background-color:#f8f8f8;
::-webkit-scrollbar {//滚动条的宽度
::-webkit-scrollbar-thumb {//滚动条的设置
background-color:#
background-clip:padding-
min-height:28
::-webkit-scrollbar-thumb:hover {
background-color:#
二，给某个div
.test1加滚动条样式
.test1::-webkit-scrollbar {
.test1::-webkit-scrollbar-track {
background-color:
-webkit-border-radius: 2
-moz-border-radius: 2
border-radius:2
.test1::-webkit-scrollbar-thumb {
background-color:
-webkit-border-radius: 2
-moz-border-radius: 2
border-radius:2
三，malihu
malihu是一款高性能的滚动条美化jQuery插件。该滚动条美化插件支持水平和垂直滚动条，支持鼠标滚动，支持键盘滚动和支持移动触摸屏。
通过Bower或nmp来安装该滚动条美化插件
bower install malihu-custom-scrollbar-plugin
npm install malihu-custom-scrollbar-plugin
使用该滚动条美化插件需要引入jQuery和jquery.mCustomScrollbar.concat.min.js以及jquery.mCustomScrollbar.css文件。
通过js来初始化
通过HTML来初始化
另外可以通过data-mcs-axis属性来设置是水平还是垂直滚动条，取值为x或y。
默认情况下该滚动条是垂直方向的滚动条，你可以通过配置参数将它设置为水平滚动条或两个方向上滚动条。
$(".content").mCustomScrollbar({
axis:"x" // 水平滚动条
$(".content").mCustomScrollbar({
axis:"yx" // 水平和垂直同时存在的滚动条CSS设置滚动条样式 |前端开发
我的图书馆
CSS设置滚动条样式 |前端开发
因为最近公司做的项目需要用到滚动条（项目在webkit平台下运行），所以研究下滚动条的CSS。
浏览器默认的滚动条样子太过屌丝了，得自己动手整整。记得IE浏览器有几个设置滚条的样式，不过比较鸡肋，只能设置颜色之类的，而且webkit下面也不支持。无意间看到网易邮箱的滚动条样子很好看，一开始以为是用div模拟的，结果一看，吼吼，正合我意，利用的CSS来设置的，而且是webkit浏览器的。
得好好研究这几个属性下，才能自己动手改造。
webkit浏览器css设置滚动条
主要有下面7个属性
::-webkit-scrollbar 滚动条整体部分，可以设置宽度啥的
::-webkit-scrollbar-button 滚动条两端的按钮
::-webkit-scrollbar-track &外层轨道
::-webkit-scrollbar-track-piece &内层滚动槽
::-webkit-scrollbar-thumb 滚动的滑块
::-webkit-scrollbar-corner 边角
::-webkit-resizer 定义右下角拖动块的样式
具体所指如图例
上面是滚动条的主要几个设置属性，还有更详尽的CSS属性
:horizontal&水平方向的滚动条
:vertical 垂直 方向的滚动条
:decrement&应用于按钮和内层轨道(track piece)。它用来指示按钮或者内层轨道是否会减小视窗的位置(比如，垂直滚动条的上面，水平滚动条的左边。)
:increment&decrement类似，用来指示按钮或内层轨道是否会增大视窗的位置(比如，垂直滚动条的下面和水平滚动条的右边。)
:start&伪类也应用于按钮和滑块。它用来定义对象是否放到滑块的前面。
:end&类似于start伪类，标识对象是否放到滑块的后面。
:double-button &该伪类以用于按钮和内层轨道。用于判断一个按钮是不是放在滚动条同一端的一对按钮中的一个。对于内层轨道来说，它表示内层轨道是否紧靠一对按钮。
:single-button&类似于double-button伪类。对按钮来说，它用于判断一个按钮是否自己独立的在滚动条的一段。对内层轨道来说，它表示内层轨道是否紧靠一个single-button。
:no-button&用于内层轨道，表示内层轨道是否要滚动到滚动条的终端，比如，滚动条两端没有按钮的时候。
:corner-present&&用于所有滚动条轨道，指示滚动条圆角是否显示。
:window-inactive&用于所有的滚动条轨道，指示应用滚动条的某个页面容器(元素)是否当前被激活。(在webkit最近的版本中，该伪类也可以用于::selection伪元素。webkit团队有计划扩展它并推动成为一个标准的伪类)
写个吧（请在webkit浏览器下观看），不能光说不练。CSS也很简单。
/* 设置滚动条的样式 */::-webkit-scrollbar {
width: 12}/* 滚动槽 */::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10}/* 滚动条滑块 */::-webkit-scrollbar-thumb {
border-radius: 10
background: rgba(0,0,0,0.1);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);}::-webkit-scrollbar-thumb:window-inactive {
background: rgba(255,0,0,0.4);}
IE下面的CSS设置滚动条
IE下面就比较简单那了，自定义的项目比较少，全是颜色。
scrollbar-arrow-color: /*三角箭头的颜色*/
scrollbar-face-color: /*立体滚动条的颜色（包括箭头部分的背景色）*/
scrollbar-3dlight-color: /*立体滚动条亮边的颜色*/
scrollbar-highlight-color: /*滚动条的高亮颜色（左阴影？）*/
scrollbar-shadow-color: /*立体滚动条阴影的颜色*/
scrollbar-darkshadow-color: /*立体滚动条外阴影的颜色*/
scrollbar-track-color: /*立体滚动条背景颜色*/
scrollbar-base-color: /*滚动条的基色*/
浏览器滚动条插件
最后吐槽下，作为三大浏览器的火狐暂时没有找到相关CSS。前些年，火狐很火，市场占有率一度威胁到IE的第一的位置。最近两年，火狐除了升级版本号，亮点很少；启动速度依旧很慢，内存占用居高不下，对CSS3和HTML5支持都走在各浏览器的后面。以前是因为火狐插件比较多，在插件数量和质量被chrome赶上来的情况下，没有理由在使用火狐了，果断转投chrome。
原创文章，转载请注明： 转载自
本文链接地址:
[转]&[转]&
喜欢该文的人也喜欢css3滚动条样式及美化方法
一,改变浏览器默认的滚动条样式
::-webkit-scrollbar-track-piece { //滚动条凹槽的颜色，还可以设置边框属性
background-color:#f8f8f8;
::-webkit-scrollbar {//滚动条的宽度
::-webkit-scrollbar-thumb {//滚动条的设置
background-color:#
background-clip:padding-
min-height:28
::-webkit-scrollbar-thumb:hover {
background-color:#
二，给某个div .test1加滚动条样式
.test1::-webkit-scrollbar {
.test1::-webkit-scrollbar-track {
background-color:
-webkit-border-radius: 2
-moz-border-radius: 2
border-radius:2
.test1::-webkit-scrollbar-thumb {
background-color:
-webkit-border-radius: 2
-moz-border-radius: 2
border-radius:2
三，malihu
malihu是一款高性能的滚动条美化jQuery插件。该滚动条美化插件支持水平和垂直滚动条，支持鼠标滚动，支持键盘滚动和支持移动触摸屏。
Bower或nmp来安装该滚动条美化插件
jQuery和jquery.mCustomScrollbar.concat.min.js以及jquery.mCustomScrollbar.css文件。
js来初始化
HTML来初始化
data-mcs-axis属性来设置是水平还是垂直滚动条，取值为x或y。
水平滚动条
水平和垂直同时存在的滚动条
责任编辑：
声明：该文观点仅代表作者本人，搜狐号系信息发布平台，搜狐仅提供信息存储空间服务。
华清远见成都中心
华清远见成都中心
今日搜狐热点scrollBar | CSS样式 - 简书
scrollBar | CSS样式
这一次需要做一个滚动的列表，但是呢又不能有滚动条。还必须要有提示的光影效果。那么，现在先解决的是没有滚动条的问题。
兼容Chrome
如果只是兼容Chrome或者是Safari的话，那么很简单，只需要：
.element::-webkit-scrollbar {display:}
自己写了一个小demo：
&!DOCTYPE html&
&html lang="en"&
&meta charset="UTF-8"&
&title&no-scroll&/title&
width: 100
height: 200
.bar1,.bar2{
width: 100
height: 1000
background:
background:
.box::-webkit-scrollbar {display:none}
&div class="box"&
&div class="bar1"&&/div&
&div class="bar2"&&/div&
很简单地就解决了这个问题。
如果这样就搞定了，也就没有意义写出一个简书来。其实在Chrome浏览器下对滚动条的玩法还有很多，比如：
Chrome 滚动条样式
::-webkit-scrollbar
//滚动条整体部分
::-webkit-scrollbar-button
//滚动条两端的按钮
::-webkit-scrollbar-track
// 外层轨道
::-webkit-scrollbar-track-piece
//内层轨道，滚动条中间部分（除去）
::-webkit-scrollbar-thumb //滚动条里面可以拖动的那个
::-webkit-scrollbar-corner
::-webkit-resizer
///定义右下角拖动块的样式
可以清晰地看到Chrome浏览器更倾向于让用户去定义全部的样式。使用的方法就类似于对一个伪类进行样式定义，比如::before。
然而事实往往和哈姆雷特一样，悲伤总要逆流成河。公司要兼容的竟然是IE10 还好不是IE7。
我查找了很多一些资料显示:
IE 滚动条样式
scrollbar-base-color: #C0C0C0;
scrollbar-base-color: #C0C0C0;
scrollbar-3dlight-color: #C0C0C0;
scrollbar-highlight-color: #C0C0C0;
scrollbar-track-color: #EBEBEB;
scrollbar-arrow-color:
scrollbar-shadow-color: #C0C0C0;
scrollbar-dark-shadow-color: #C0C0C0;
你会发现可悲的IE竟然只是支持修改颜色，完全没有任何可玩性。到此IE通过CSS直接去修改滚动条的想法就已经做不到了。
路总是被走出来的，查了一下。最后发现，有一个人利用外面嵌套一层&div&&/div&，专门只干一件事，就是把滚动条隐藏掉，让我对原来的demo进行改造一下，以下为原来的未修改滚动条的样式：
&!DOCTYPE html&
&html lang="en"&
&meta charset="UTF-8"&
&title&Document&/title&
width: 100
height: 200
.bar1,.bar2{
width: 100
height: 1000
background:
background:
&div class="no-scroll"&
&div class="box"&
&div class="bar1"&&/div&
&div class="bar2"&&/div&
会看到，有一个阴影在右侧。
.no-scroll{
//相对于内部的宽度减少了20px
height: 200
width: 100
height: 200
.bar1,.bar2{
width: 100
height: 1000
background:
background:
好了，这样效果就可以看到，效果不好看出来，可以复制黏贴去看看效果：
最后说明：为什么在这里要相对box减少20px呢，笔者亲测发现在chrome下如果减少10px的话，仍然会出现一些滚动条的效果。为了方便样式的设置，在这里默认就为20px。若有朋友测出精确的数值，欢迎指教。
感谢梁智杰挚友催我出算法，所以今晚本来不想写文章，这两天看了一本书《历史的细节》。突然觉得以前看待事物的时候关联系还是考虑的太少了。本来想继续看的。被智杰一催才有了不能偷懒的动力。再次感谢。
然而算法，我觉得我需要对第一道题目优化完了再写。我目前对散表还有些疑惑。等我陆续学了再进一步写可能会更好。所以把每日一算改成了一日一算，也算给一个交代。再次感谢。
参考文章：
问答题47 /72 常见浏览器兼容性问题与解决方案？ 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默认的外补丁和内补丁不同问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。碰到频率:100%解决方案：CSS里 {margin...
CSS 绝对底部 - 前端 - 掘金来自国外的设计达人，纯CSS，可以实现: 当正文内容很少时，底部位于窗口最下面。当改变窗口高度时，不会出现重叠问题。甚至，创造该CSS的人还专门成立一个网站介绍这个CSS底部布局方案。不知道他有没有去申请专利:)&!DOCTYPE htm...
display: 与 visibility: 的区别 联系：它们都能让元素不可见 区别：display:会让元素完全从渲染树中消失，渲染的时候不占据任何空间；visibility:不会让元素从渲染树消失，渲染师元素继续占...
转载请声明
原文链接地址 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位：web前端开发工程师web网站架构师自己创业转岗管理或其他 web前端开发的前景展望：未来IT行业企业需求最多的人才结合最新的html5抢占移动端的市场自己创业做老板随着互联网的普及...
不知道为什么忽然想吃炸酱面，很奇怪。记忆里上次吃炸酱面，是和你。 我坐了很久的车去找你，在瑟瑟的寒风中拒绝了你迎面而来的饱含温暖的拥抱。 你问我，饿了吗？我还是不敢长时间的盯着你看，笑了笑说很想吃炸酱面。 那家炸酱面的味道我忘了，但是很咸。 就像我当时对你的爱，很满。 时间...
他们周围慢慢传来窸窸窣窣的声响，那声响在逐渐把他俩儿围住。声音从包围圈儿外传来：“怎么不继续躲下去了？” 邱林和范大海向声音的源头看去，那是只少了一个蟹钳的黑盖儿螃蟹，就像人的脸上有刀疤一样，看了不禁心生畏惧。但范大海还是硬着头皮，理直气壮地说：“我们来场各取所需的谈判，如...
今天盘面看，符合文章预期，明确提示抄底机会前期低位附近，今天你把握了吗？早盘股指在上周五暴跌的惯性下大幅低开，直接破位前期大底2850点之下，但是瞬间回辙后即振荡起升，过程中中小板与创业板加速拉升，题材股与概念股全线放量暴涨，最终沪指报收小阳。沪市全天成交量为1736亿元，...
这是千岛湖畔的一个民宿村，一幢一院落，院子里有花有草有蔬菜。同行的伙伴去镇上买菜做了丰盛的一桌晚饭，饭后孩子们又扎堆胡闹去了，大人开始麻将。 沿着村内独自溜了一圈，家家格局类似，又各有不同，有大票年轻人烧烤喝酒，有孩子们奔跑笑闹，村子不大，几步到头。 回到院内独坐，山风很大...
黄小仙失恋了，喝醉酒再次见到前男友后拼命的追着车子跑，那段心里独白：“我要追上那辆车，我有话要跟他说。我要问他，我知道我做错了什么，你可不可以在下面，再等我片刻?我令你没有尊严的一步步走了下去，为了惩罚我，我甚至愿意一路滚到你脚边，从此和你平起平坐，你能不能再等等我，前路太...当前位置： >>
css设置滚动条风格scrollbar样式风格
把代码放到如下图位置css 代码如下 代码如下 复制代码&style type=&text/css&& body, html { scrollbar-face-color: #353535; scrollbar-shadow-color: #565656; scrollbar-highlight-color: #565656; scrollbar-3dlight-color: #7F7F7F; scrollbar-darkshadow-color: #565656; scrollbar-track-color: #565656; scrollbar-arrow-color: #DADADA; } &/style& 由于在 xhtml 中 定义在 body 上是没有效果的，所以为了通用，可以在 body 和 html 标 签都定义一下。 这些属对应图例如下：好了，下面预览你的 html 页面看看是不是滚动条的色变成你设置的色彩了哦。
HTML5+CSS3 DIV 滚动条 DIV 滚动条就是利用 DIV 标签,在里面嵌入 CSS 样式...SCROLLBAR-3DLIGHT-COLOR:# LINE-HEIGHT:100%; SCROLLBAR-ARROW-COLOR.../*- 最外左 -*/ scrollbar-highlight-color:#fff...同样的问题 那么怎么才能在 xhtml 下应用滚动条样式...css设置滚动条风格scrol...
div+css...200 min-height:200 } 4.为什么 web 标准中 IE 无法设置滚动条颜色...原来样式设置:
body { scrollbar-face-color:#f6f6f6; scrollbar-highlight-...CSS控制层让某个位置固定不会跟随滚动条移动_IT/计算机_专业资料。CSS控制层让...滚动条,顾名思义,就是可以滚动的条(ScrollBar) (废话) 。准确地说,滚动条...&SUP&等控制标记虽然可以将数据格式化,但能做到的格式化有限, 而 CSS 正好弥补...分类样式 (Classification Property) 、 滚动条样式 (Scrollbar 第 6 页共 6 ...html+css 基础 1、网页 HTML 代码最前面必须包括 ...设置网页滚动条的样式: html { scrollbar-face-...先设置四个边的默认风格,然后声明具体的哪个边要显示...
无标题文档
.select{border: background:#09C;} .s1{background-color...滚动条的控制 SCROLLBAR-FACE-COLOR:滚动跳凸起部分的颜色 SCROLLBAR-HIGHLIGHT...css样式表基础_IT/计算机_专业资料。CSS样式表 基础...滚动条样式 , (Scrollbar Property) ,鼠标样式(Cursor...边界样式(border-style) 该属性用以定义边框的风格...solid/*设置上框线 top 样式*/ 其他框线样式 solid /*实线框*/ dotted /*...Scrollbar-base-color:#fcfcfc/*滚动条的基本颜色*/ CSS 基本语法规则选择符 ...四、为什么 web 标准中 IE 无法设置滚动条颜色了? 原来样式设置: &style type...blank&css&& body { scrollbar-face-color:#f6f6f6; scrollbar-highlight-...
All rights reserved Powered by
www.tceic.com
copyright &copyright 。文档资料库内容来自网络，如有侵犯请联系客服。