我正在寻找一个无需 jquery 即可工作的自定义滚动条。我不能使用 jquery,因为其他东西也是无 jquery 的,并且它针对快速加载进行了优化。
将不胜感激与我分享的任何想法。
NONNNNN
如果您不想使用 jQuery,您可以随时尝试 CSS(仅适用于 WebKit)。
JSFIDDLE http://jsfiddle.net/EKdDa/1/
CSS 示例:
::-webkit-scrollbar {
width: 15px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #000000;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
background-color: #555555;
}
::-webkit-scrollbar-button {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
background-color: #000000;
background-image: url(dark/light-blue/images/ui-icons_0990fb_256x240.png);
}
::-webkit-scrollbar-button:vertical:increment {
background-position: -64px -16px;
}
::-webkit-scrollbar-button:vertical:decrement {
background-position: 0 -16px;
}
::-webkit-scrollbar-button:horizontal:increment {
background-position: -32px -16px;
}
::-webkit-scrollbar-button:horizontal:decrement {
background-position: -96px -16px;
}
::-webkit-scrollbar-corner {
background-color: #000000;
}
有关 WebKit 自定义滚动条的更多信息 http://css-tricks.com/custom-scrollbars-in-webkit/
如果您需要多个浏览器支持,您需要使用 jQuery 或编写自己的自定义 javascript 代码,为滚动条附加一个 div 并添加事件处理程序以了解何时滚动。
自定义滚动条代码示例 http://jsfiddle.net/dVsVq/21/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)