gpt4 book ai didi

html - 带css的透明滚动条

转载 作者:技术小花猫 更新时间:2023-10-29 12:07:47 25 4
gpt4 key购买 nike

现在使用此代码(以及此代码的许多变体),但滚动轨道会变成深灰色,类似于 #222222 或接近此。找到很多例子,但所有例子都给出相同的结果。 Opera、Chrome 和 Firefox 显示了这个错误。如何修复?

#style-3::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background-color: transparent;
}

#style-3::-webkit-scrollbar {
width: 6px;
background-color: transparent;
}

#style-3::-webkit-scrollbar-thumb {
background-color: #000000;
}

最佳答案

编辑:

我用 overflow: overlay 给出的解决方案在 Google Chrome 等浏览器中仍然有效你仍然可以在下面看到我的答案。然而,overflow: overlay被标记为折旧。

是否存在替代解决方案尚不得而知,但下面提到的解决方案仍然适用于 Google Chrome。据我了解 https://github.com/w3c/csswg-drafts , 替代方案是 scrollbar-gutter .但实际上没有任何指向替代解决方案的迹象,除了有人说会有。

scrollbar-gutter 的文档说,用户代理能够控制它是显示经典滚动条还是覆盖滚动条。 csswg-drafts 的人说,要实现这样一个功能的人似乎对它不感兴趣。

如果我们想要替代解决方案,那么我们必须在这里告诉他们:https://github.com/w3c/csswg-drafts/issues/7716

我不能单独建议这个,他们需要更多的人对拥有一个“功能”感兴趣,让网站作者控制应该使用经典滚动条还是覆盖滚动条。

关于谷歌浏览器的叠加滚动条。他们做了一个实验,允许用户在 chrome://flags/ 启用它,然后搜索“Overlay Scrollbars”。

回答:

如果你将它用于“正文”:

body {
overflow: overlay;
}

然后滚动条也会在整个页面上采用透明背景。这还将把滚动条放在页面内,而不是移除一些宽度以放入滚动条。

这是一个演示代码。我无法将它放入任何 codepen 或 jsfiddle 中,显然我花了一段时间才弄清楚,但它们没有显示透明度,我也不知道为什么。

但是将其放入 HTML 文件中应该没问题。

能够把它放在 fiddle 上:https://jsfiddle.net/3awLgj5v/

<!DOCTYPE html>
<html>
<style>
html, body {
margin: 0;
padding: 0;
}

body {
overflow: overlay;
}

.div1 {
background: grey;
margin-top: 200px;
margin-bottom: 20px;
height: 20px;
}

::-webkit-scrollbar {
width: 10px;
height: 10px;
}

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

::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.2);
}
</style>

<body>

<div class="div1"></div>

<div class="div1"></div>

<div class="div1"></div>

<div class="div1"></div>

<div class="div1"></div>


</body>
</html>

我想最好的测试方法是创建一个本地 html 文件。

您还可以将其应用于其他元素,例如任何滚动框。在使用检查器模式时,您可能必须将溢出隐藏起来,然后再返回到其他任何东西。它可能需要刷新。之后应该可以在滚动条上工作而不必再次刷新它。请注意,这是针对检查员模式的。

关于html - 带css的透明滚动条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23200639/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com