Question

基本上，我正在尝试为我需要做的Tumblr博客设置更薄的滚动条。如何指定滚动条应该生效的div，因为我不希望自定义滚动条（对于div）替换Web浏览器的默认滚动条（屏幕最右侧的滚动条）？

有什么建议吗？我看到了新滚动条的css，但它是所有的webkit，如果没有HTML，我如何挑出我希望它影响哪个DIV？

Answer 1

您可以为此示例设置任何特定div的滚动条样式。我将自定义滚动条应用于class="scroll"

的div

然而，自定义滚动条css在firefox中不起作用。但是你可以使用一些自定义的jquery插件（它们可能不如css那么好，但它们可以解决问题）而且这里有question。

关于您可以将哪些不同的属性和样式应用于自定义滚动条，这是一个很棒的article。

.scroll{
  background-color:green;
  width:100px;
  height:200px;
  overflow:scroll;
}
.scroll::-webkit-scrollbar-track{
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  background-color: #F5F5F5;
}
.scroll::-webkit-scrollbar{
  width: 10px;
  background-color: #F5F5F5;
}
.scroll::-webkit-scrollbar-thumb{
  background-color: #000000;
  border: 2px solid #555555;
}

<div class="scroll">
   sdaf<br/>sdaf<br/>sdaf<br/>sdaf<br/>sdaf<br/>sdaf<br/>sdaf<br/>sdaf<br/>sdaf<br/>sdaf<br/>sdaf<br/>sdaf<br/>sdaf<br/>sdaf<br/>sdaf<br/>
</div>

如何使自定义滚动条仅应用于特定DIV标记

1 个答案: