1. 首页
  2. css

带有进度表的CSS滚动条

滚动条是自然进度表。滚动条向下或穿过的距离是滚动该元素(通常是整个页面)所取得的进展。但是,他们更像是进度指标,而不是米,如果你认为一个米的东西,你去\”填补\”。
我们可以使用一些CSS技巧来让滚动条在运行时充满。
这只适用于带有-webkit-供应商前缀的滚动条样式属性。换句话说,这些都是非标准的。标准化的滚动条样式属性是scrollbar-width和scrollbar-color,这两个属性不能实现这类功能,但从长远来看可能是更安全的选择。不过,厂商的前缀版本可能不会有任何进展,所以如果你认为这是一种奇怪的渐进式增强形式,那可能没问题。诀窍是什么?本质上,它是在滚动条拇指的顶部悬挂一个巨大的box-shadow,如果它是一个水平滚动的元素,则挂在侧面。
:root {–shadow: #43a047;–scrollbarBG: #eee;–thumbBG: #66bb6a;}::-webkit-scrollbar {width: 16px;}::-webkit-scrollbar-track {background: var(–scrollbarBG);}::-webkit-scrollbar-thumb {background-color: var(–thumbBG);box-shadow: 0 -100vh 0 100vh var(–shadow), 0 0 15px 5px black;}DemoCodePen Embed Fallback
我第一次在Myk的笔中看到这个。
这个例子根本没有区分滚动条的拇指部分,这使得它更像米,但也更难使用。我的演示有一个稍微不同的颜色拇指。我真的能用这个吗?
不!除了超级怪异和不标准之外。萨法里翻了翻盖子,我不知道怎么修。
。我想了解有关滚动条样式的更多信息,很酷,给你

带有进度表的CSS滚动条 为WP2原创文章,链接:https://www.wp2.cn/css/%e5%b8%a6%e6%9c%89%e8%bf%9b%e5%ba%a6%e8%a1%a8%e7%9a%84css%e6%bb%9a%e5%8a%a8%e6%9d%a1/