css - 自定义滚动框

标签 css browser-scrollbars

我正在尝试创建一个滚动框,通过它我可以更改箭头的形状和颜色以及文本区域的背景。

我正在尝试创建与以下相同的滚动框,但无济于事。

image

image

最佳答案

您可以为 Chrome、Opera 和 IE 的滚动条设置样式。不幸的是,Firefox 不支持它。

此外,每个浏览器引擎都使用自己的前缀和属性来设置滚动条的样式,有些提供的比其他的更多。

WebKit 示例:

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

::-webkit-scrollbar-track {
  background: grey;
}

::-webkit-scrollbar-thumb {
  background: black;
}

网上有很多关于滚动条样式的资源。

底线是:
如果您想要 100% 的浏览器兼容性,请使用 JavaScript 解决方案(谷歌搜索“jquery scrollbars”)。

关于css - 自定义滚动框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40332116/

相关文章:

javascript - 等待图像完全加载后再显示在页面上?

html - 有 float :right span contractible

CSS:隐藏对象是否可点击?

html - Internet Explorer 中的滚动条 CSS

css - 在不使用 flexbox 或绝对位置的情况下,将 span 与内联 svg 居中对齐

css - 如何在 sass 结果中包含空类和 ID

qt - 将QTextBrowser滚动到顶部

javascript - 只要浏览器添加滚动条,内容就会水平跳转

jquery - 滚动到页面末尾时使用 Jquery 发出警报