官网:http://jscrollpane.kelvinluck.com/ 引入相关文件: //插件自带滚动条样式文件 HTML:
//此DIV显示滚动条
jquery.jscrollpane.css内部样式: .jspContainer { overflow: hidden; position: relative; } .jspPane { position: absolute; } /*整体样式*/ .jspVerticalBar { position: absolute; top: 0; right: 0; width: 16px; height: 100%; } .jspHorizontalBar { position: absolute; bottom: 0; left: 0; width: 100%; height: 16px; background: red; } .jspCap { display: none; } .jspHorizontalBar .jspCap { float: left; } /*滚动条底条样式*/ .jspTrack { background: #fff; position: relative; width: 3px; } /*滚动条滑动块样式*/ .jspDrag { background: #7db5fa; position: relative; top: 0; left: 0; width: 16px; margin-left: -6px; cursor: pointer; } .jspHorizontalBar .jspTrack, .jspHorizontalBar .jspDrag { float: left; height: 100%; } .jspArrow { background: #50506d; text-indent: -20000px; display: block; cursor: pointer; padding: 0; margin: 0; } .jspArrow.jspDisabled { cursor: default; background: #80808d; } .jspVerticalBar .jspArrow { height: 16px; } .jspHorizontalBar .jspArrow { width: 16px; float: left; height: 100%; } .jspVerticalBar .jspArrow:focus { outline: none; } .jspCorner { background: #eeeef4; float: left; height: 100%; }