在Google Chrome中使用CSS样式化滚动条（-webkit）

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); }

谢谢大家。干杯。Alex

- Alexandru Vlas

Answer 1

这里有一个可行的示例：

::-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。

- orel

---

两个链接都失效了。 - Vinay Kaithwas

亲爱的@orel，你能再次发布正确的链接吗？ - undefined

Answer 2

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

- Mahdad

Answer 3

对于在2021年12月之后查看此答案的任何人，我添加了一个代码段，其中包含了@orel的回答（更新了代码，还添加了一些HTML并将滚动条样式从background: #000;更改为background: #aaa;以更好地显示滚动条）。

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

::-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;
}

.scrollable {
  max-width: 200px;
  max-height: 100%;
  
  height: 450px;
  /* change ` overflow: scroll ` to ` overflow: auto ` if you only want vertical scroll */
  overflow: scroll;
 }

<div class="scrollable">
What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Why do we use it?
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</div>

- Berci

---

不适用于Chrome移动版iPhone XS Max。 - Huy - Logarit

根据https://caniuse.com/css-scrollbar，iOS 14（包括15.4）之后由于某种原因不支持CSS滚动条样式（无论在safari或Chrome上）。 - Berci