Question

我正在尝试找到一个看起来像iPhone的jQuery滚动条：一个没有向上或向下按钮的简单黑条。我发现了一些脚本，但大多数都比我需要的更多。我基本上有一个固定高度的div，它设置在overflow:auto上，我想应用这个滚动条。非常感谢帮助！

Answer 1

Matteo Spinelli在他的iScroll库中有一个类似iPhone的滚动条。您应该尝试研究是否可以根据自己的需要采用它。

Answer 2

您的浏览器要求是什么？

您应该尝试避免使用JavaScript解决方案，因为它们会增加页面的复杂性。如果第三方滚动条javascript库中断，您将不得不自己调试（去过那里，完成了）。

Chrome完全支持CSS3滚动条，这样的东西应该像iPhone一样使用滚动条

::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}

IE允许使用供应商特定标签设置样式滚动条，但它非常有限。 e.g：

scrollbar-base-color: #663366; 
scrollbar-face-color: #99CCCC; 
scrollbar-track-color: #996699; 
scrollbar-arrow-color: #330033;
scrollbar-highlight-color: #FFFFFF; 
scrollbar-3dlight-color: #CCCCCC; 
scrollbar-shadow-color: #663366;
scrollbar-darkshadow-color: #000000;

这是一个带有样式滚动条的jsFiddle： http://jsfiddle.net/APmLZ/3/

类似iPhone的jQuery Scrollbar

2 个答案: