如何使滚动条透明不可见

Question

嗨，是否有可能隐藏滚动条，而不使用overflow-y: hidden？只需类似于background: transparent或类似的东西即可。

- george

Answer 1

在这里，您将发现如何仅使用CSS隐藏滚动条的说明。
在第二个示例中，您将找到一种解决方案，例如如何隐藏div中的滚动条。
第二个示例的技巧是定义一个比周围容器更宽的div容器。

.hidden-scrollbar .inner {
   height:200px;
   overflow:auto;
   margin:15px -300px 15px 15px;
   padding-right:300px;
}

只需调整margin和padding的值即可。

- Moritz Jaeger

Answer 2

在基于Webkit的浏览器（如Chrome和Safari）中，有一种CSS规则可以隐藏滚动条。该规则为：

.element::-webkit-scrollbar { width: 0 !important }

您可以更改宽度/背景颜色和其他属性。

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

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0); 
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0); 
}

这段 CSS 代码可能有效。

- Nihar Sarkar

---

不过，Not supported by Firefox。 - Stefan Falk

Firefox有scrollbar-width。 - RhinoDevel

Answer 3

在Webkit浏览器中：

::-webkit-scrollbar { 
    display: none; 
}

- Fjut