Question

如何更改css中的滚动条样式或更改chrome或任何浏览器中的不同UI。我见过很多网站都有不同的用户界面是否可以使用css或html？

完成此操作

Answer 1

检查here。您还可以查看this link。

像这样使用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;
}

Answer 2

你可以这样试试，

body {
    scrollbar-face-color: #000000;
    scrollbar-shadow-color: #2D2C4D;
    scrollbar-highlight-color:#7D7E94;
    scrollbar-3dlight-color: #7D7E94;
    scrollbar-darkshadow-color: #2D2C4D;
    scrollbar-track-color: #7D7E94;
    scrollbar-arrow-color: #C1C1D1; 
}

还有一个EXAMPLE具有悬停效果。

Answer 3

我刚学会了这个主题，我们可以在CSS3中自定义滚动条... 但它在每个浏览器中看起来都不是很有效。

我建议你选择（如果可以的话）一个jQuery插件。像http://manos.malihu.gr/repository/custom-scrollbar/demo/examples/complete_examples.html一样。我经常使用它。它功能强大，可定制且可互操作！

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

3 个答案: