Question

有人可以帮帮我吗？我想为滚动条做一个简单的样式。我在互联网上找到了一些信息并试了一下，但似乎由于某些原因它并没有真正起作用。刷新页面时滚动条看起来很好，但只要触摸滚动条就会发疯。它充满了很多颜色，你无法理解这是一个滚动条。

在您触摸它之前它的外观如何 - http://i40.tinypic.com/a2evro.png

以下是您触摸它后的样子 - http://i44.tinypic.com/qzkirn.png

这是我放在css中的代码：

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

::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.2);
-webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,0.10),inset 0 -1px 0 rgba(0,0,0,0.07); }

谢谢大家。干杯。亚历

Answer 1

Here is an example that works：

::-webkit-scrollbar {
    height: 12px;
    width: 12px;
    background: #000;
}

::-webkit-scrollbar-thumb {
    background: #393812;
    -webkit-border-radius: 1ex;
    -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75);
}

::-webkit-scrollbar-corner {
    background: #000;
}

或者您可以使用jScrollPane。

Answer 2

.invisible-scrollbar {
  scrollbar-width: none;
}
.invisible-scrollbar::-webkit-scrollbar {
  display: none;
}

在Google Chrome中使用css设置滚动条的样式（-webkit）

2 个答案: