首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >跨浏览器的CSS滚动条样式

跨浏览器的CSS滚动条样式
EN

Stack Overflow用户
提问于 2011-10-11 19:55:44
回答 4查看 614.2K关注 0票数 168

如何定义跨浏览器的CSS滚动条样式?我测试了这段代码,它只能在IE和opera中运行,但在Chrome、Safari和Firefox中失败了。

代码语言:javascript
复制
<style type="text/css">
<!--    
body {
    scrollbar-face-color: #000000;
    scrollbar-shadow-color: #2D2C4D;
    scrollbar-highlight-color:#7D7E94;
    scrollbar-3dlight-color: #7D7E94;
    scrollbar-darkshadow-color: #2D2C4D;
    scrollbar-track-color: #7D7E94;
    scrollbar-arrow-color: #C1C1D1;
}
-->
</style>
EN

回答 4

Stack Overflow用户

回答已采纳

发布于 2011-10-11 19:58:05

滚动条CSS样式是微软开发人员发明的一种奇怪的样式。它们不是CSS的W3C标准的一部分,因此大多数浏览器都会忽略它们。

票数 115
EN

Stack Overflow用户

发布于 2013-06-05 06:25:43

Webkit对滚动条的支持是quite sophisticated。这个CSS给出了一个非常小的滚动条,有一个浅灰色的轨道和一个深色的拇指:

代码语言:javascript
复制
::-webkit-scrollbar
{
  width: 12px;  /* for vertical scrollbars */
  height: 12px; /* for horizontal scrollbars */
}

::-webkit-scrollbar-track
{
  background: rgba(0, 0, 0, 0.1);
}

::-webkit-scrollbar-thumb
{
  background: rgba(0, 0, 0, 0.5);
}

This answer是一个很棒的额外信息来源。

票数 151
EN

Stack Overflow用户

发布于 2011-10-11 20:02:20

jScrollPane是跨浏览器滚动条的一个很好的解决方案,并且可以很好地降级。

票数 32
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/7725652

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档