如何在css中更改滚动条样式

Question

如何css在 chrome 或任何浏览器中更改滚动条样式或更改不同的 UI。我见过许多具有不同用户界面的网站。
这可以用css或来完成html吗？

Answer 1

检查这里。您也可以查看此链接。

像这样使用css

html {
  background: lightgrey;
  height: 100%;
  overflow: hidden;
}
body {
  height: 100%;
  background: whitesmoke;
  overflow: scroll;
  width: 80%;
  max-width: 600px;
  margin: 0 auto;
  padding: 3em;
  font: 100%/1.4 serif;
  border: 1px solid rgba(0,0,0,0.25)
}
p {
  margin: 0 0 1.5em;
}

body::-webkit-scrollbar {
    width: 0.2em;
}

body::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}

body::-webkit-scrollbar-thumb {
  background-color: red;
  outline: 1px solid red;
}