类似 iPhone 的 jQuery 滚动条

发布于 2024-10-18 08:41:24 字数 159 浏览 6 评论 0原文

我试图找到一个看起来像 iPhone 滚动条的 jQuery 滚动条：一个简单的黑色滚动条，没有向上或向下按钮。我找到了一些脚本，但大多数脚本的功能往往超出了我的需要。我基本上有一个固定高度的 div，设置在 overflow:auto 上，我想应用这个滚动条。帮助将不胜感激！

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

但可醉心 2024-10-25 08:41:24

Matteo Spinelli 的中有一个类似 iPhone 的滚动条iScroll 库。您应该尝试看看是否可以采用它来满足您的需求。

回复收藏 0 原文

遇见了你 2024-10-25 08:41:24

您的浏览器有什么要求？

您应该尽量避免使用 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 允许使用供应商特定标签设置滚动条样式，但它非常有限。例如：

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/

What are your browser requirements?

You should try to avoid javascript solutions since they will increase the complexity of your page. If a third-party scrollbar javascript library breaks, you will have to debug it yourself (been there, done that).

Chrome has full support for CSS3 scrollbars, something like this should make an iPhone like scrollbar

::-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 allows styling scrollbars with vendor specific tags, but its very limited. 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;

Here is a jsFiddle with the styled scrollbars:
http://jsfiddle.net/APmLZ/3/

回复收藏 0 原文

~没有更多了~