【问题标题】:Custom scrollbar in a Chrome AppChrome 应用中的自定义滚动条
【发布时间】:2015-10-14 22:51:26
【问题描述】:

我想使用 CSS 规则 #2 自定义我的 Chrome 应用的滚动条:

section { overflow: auto }
section::-webkit-scrollbar {
    width: 5px ;
}

很遗憾,使用第二条规则,Chrome 将不会显示滚动条。 如果没有第二条规则,默认滚动条会按预期显示。

这是正常行为吗? 我检查了文档,但没有发现任何内容...

【问题讨论】:

  • 如果您将页面加载为普通页面,而不是在应用程序中,它会起作用吗?
  • @Xan 好点:滚动条在这里但透明!我添加了另一条规则: ::-webkit-scrollbar-thumb { background-color: gray ; } 现在没问题了。

标签: css google-chrome scrollbar google-chrome-app blink


【解决方案1】:

我相信在你用::-webkit-scrollbar-track::-webkit-scrollbar-thumb 描述如何显示它之前它是不可见的

CSSTricks 将其列为 minimal 示例:

::-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); 
}

【讨论】:

  • 再次感谢您的帮助。注意:::webkit-scrollbar-track 很有用,但可选。
猜你喜欢
  • 2020-10-15
  • 2016-11-17
  • 1970-01-01
  • 1970-01-01
  • 2013-08-26
  • 2020-07-15
  • 2013-07-02
  • 2011-11-13
相关资源
最近更新 更多