滚动条探索之美化

webkit下css实现样式修改

基于webkit内核的浏览器可通过-webkit-scrollbar伪元素实现对滚动条样式的控制。

::-webkit-scrollbar — 整个滚动条.
::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头).
::-webkit-scrollbar-thumb — 滚动条上的滚动滑块.
::-webkit-scrollbar-track — 滚动条轨道.
::-webkit-scrollbar-track-piece — 滚动条没有滑块的轨道部分.
::-webkit-scrollbar-corner — 当同时有垂直滚动条和水平滚动条时交汇的部分.
::-webkit-resizer — 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件

例子

::-webkit-scrollbar{/*滚动条整体*/
    width: 45px;
}
::-webkit-scrollbar-thumb{/*滚动条里面的小方块*/
    background: #666666;
    border-radius: 45px;
}
::-webkit-scrollbar-track{/*滚动条轨道的样式*/
    background: #ccc;
    border-radius: 5px;
}
::-webkit-scrollbar-track-piece{/*滚动条没有滑块的轨道样式*/
    background: rgb(1, 117, 133);
    border-radius: 45px;
}

::-webkit-scrollbar 为一切的基础，并且所有的伪元素后面可通过添加:vertical和:horizontal两个伪类来是定所调整的为纵向还是横向滚动条。

IE下css实现样式修改

IE浏览器仅支持修改颜色，无法对滚动条的形状大小进行修改。

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; /*滚动条的基色*/

NiceScroll插件实现滚动条美化

介绍

基于jQuery实现的滚动条插件，无需额外的css启用只需一行代码，灵活方便可完全自定义滚动条的样式。几乎兼容全部的浏览器，同时支持触摸事件。

用法

引入jQuery和nicescroll

<div class="boxscroll">
    <div class="contentscroll"></div>
</div>

只需下面简单一行代码便可实现滚动条的开启,nicescroll不依赖原本浏览器样式。

$(".boxscroll").niceScroll();

效果如下：

修改样式也同样的方便，niceScroll()传入想修改的参数即可。

$(".boxscroll").niceScroll({cursorcolor:"#F00",cursoropacitymax:0.7});

配置参数

cursorcolor: "#424242", // 滚动条光标的颜色 change cursor color in hex
cursoropacitymin: 0, // 滚动条在不激活状态下的透明度，默认是0 change opacity when cursor is inactive (scrollabar "hidden" state), range from 1 to 0
cursoropacitymax: 1, //滚动条在激活状态下的透明度，默认是1 change opacity when cursor is active (scrollabar "visible" state), range from 1 to 0
cursorwidth: "5px", // 滚动条宽度 cursor width in pixel (you can also write "5px")
cursorborder: "1px solid #fff", //用css定义滚动条的边框 css definition for cursor border
cursorborderradius: "5px", //滚动条的圆角半径 border radius in pixel for cursor
zindex: "auto" | <number>, //改变滚动条div的z-index的值 change z-index for scrollbar div
scrollspeed: 60, // 滚动速度
mousescrollstep: 40, //使用鼠标轮滚的时候的滚动速度 scrolling speed with mouse wheel (pixel)
touchbehavior: false, //在桌面电脑上启用光标拖动，就像触摸设备那样 enable cursor-drag scrolling like touch devices in desktop computer
hwacceleration: true, //如果设备支持，则启用硬件加速 use hardware accelerated scroll when supported
boxzoom: false, //给盒子的内容启用放大缩小功能 enable zoom for box content
dblclickzoom: true, //双击放大，在boxzoom=true的情况下 (only when boxzoom=true) zoom activated when double click on box
gesturezoom: true, //手势放大缩小，在boxzoom=true的情况下 (only when boxzoom=true and with touch devices) zoom activated when pinch out/in on box
grabcursorenabled: true //这个可以禁用"grab"鼠标光标 (only when touchbehavior=true) display "grab" icon
autohidemode: true, //设置在什么情况下隐藏scrollbar。 how hide the scrollbar works, possible values: 
  true | // 在不滚动情况下隐藏。 hide when no scrolling
  "cursor" | //只隐藏光标 only cursor hidden
  false | //始终不隐藏 do not hide,
  "leave" | //只在鼠标离开内容区是隐藏 hide only if pointer leaves content
  "hidden" | //使用隐藏 hide always
  "scroll", //只在滚动的情况下显示，在不滚动的时候隐藏 show only on scroll          
background: "", //设置背景颜色 change css for rail background
iframeautoresize: true, //在iframe的load事件中自动设置大小 autoresize iframe on load event
cursorminheight: 32, //设置最小的光标高度 set the minimum cursor height (pixel)
preservenativescrolling: true, //这个设置通过事件冒泡的方式使你能够滚动原生的滚动条。 you can scroll native scrollable areas with mouse, bubbling mouse wheel event
railoffset: false, //设置轨道的上或者左的偏移 you can add offset top/left for rail position
bouncescroll: false, //启用向手机上面的那种滚动回弹 (only hw accell) enable scroll bouncing at the end of content as mobile-like 
spacebarenabled: true, // enable page down scrolling when space bar has pressed
railpadding: { top: 0, right: 0, left: 0, bottom: 0 }, //设置轨道的内间距 set padding for rail bar
disableoutline: true, //在chrome浏览器上选择一个div使用nicescroll时禁用outline， for chrome browser, disable outline (orange highlight) when selecting a div with nicescroll
horizrailenabled: true, //设置是否处理水平滚动 nicescroll can manage horizontal scroll
railalign: right, //垂直对齐方式 alignment of vertical rail
railvalign: bottom, //水平对齐方式 alignment of horizontal rail
enabletranslate3d: true, //设置nicescroll是否使用css translate去滚动内容 nicescroll can use css translate to scroll content
enablemousewheel: true, //设置是否响应鼠标滚动事件 nicescroll can manage mouse wheel events
enablekeyboard: true, //设置是否响应键盘事件 nicescroll can manage keyboard events
smoothscroll: true, //使用平滑滚动 scroll with ease movement
sensitiverail: true, //在轨道上点击时是否滚动 click on rail make a scroll
enablemouselockapi: true, // can use mouse caption lock API (same issue on object dragging)
cursorfixedheight: false, //给光标设置固定的高度 set fixed height for cursor in pixel
hidecursordelay: 400, //设置隐藏光标的延迟时间，单位是毫秒 set the delay in microseconds to fading out scrollbars
directionlockdeadzone: 6, // dead zone in pixels for direction lock activation
nativeparentscrolling: true, //检测内容的底部和父节点是否允许滚动，像原生滚动条的实现方式 detect bottom of content and let parent to scroll, as native scroll does
enablescrollonselection: true, //在选择文字的时候自动滚动内容 enable auto-scrolling of content when selection text
cursordragspeed: 0.3, //当拖动光标时候的速度 speed of selection when dragged with cursor
rtlmode: "auto", //设置水平滚动div的起始边是左还是右 horizontal div scrolling starts at left side
cursordragontouch: false, //设置在触摸模式下，是否可以拖动光标就可以滚动 drag cursor in touch / touchbehavior mode also
oneaxismousemode: "auto", //设置鼠标滚轮在只有水平模式的情况下是否可用 it permits horizontal scrolling with mousewheel on horizontal only content, if false (vertical-only) mousewheel don't scroll horizontally, if value is auto detects two-axis mouse
scriptpath: "" //设置box模式下图标的路径，设成""表示和script是同一个路径 define custom path for boxmode icons ("" => same script path)
preventmultitouchscrolling: true //防止在多点触摸情况下滚动 prevent scrolling on multitouch events
disablemutationobserver: false //稳定滚动条 force MutationObserver disabled