Question

代码：

<style>
::-webkit-scrollbar{
    width: 23px;
}
::-webkit-scrollbar-track{
    background-color: transparent;
}
::-webkit-scrollbar-thumb {
      background-color: silver;
}
::-webkit-scrollbar-button {
      background-color: transparent;
}
::-webkit-scrollbar-corner {
      background-color: transparent;
}
</style>
<body>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>

jsfiddle：https://jsfiddle.net/2zcxnL66/

在chrome中的代码中，滚动条的其他内容很好并且很好用。

但我关心滚动条的一些余地。看起来滚动条轨道的顶角或底角有一些余量。

问题： 我该如何删除这些保证金？我想让滚动条完全顶部，就像margin-top_or_bottom-of-scrollbar-track：0;

Answer 1

这些不是边距，但是你所用的箭头所用的空间是透明的。因此，您可以将它们display:none：

＆＃13;

::-webkit-scrollbar{
    width: 23px;
}
::-webkit-scrollbar-track{
    background-color: transparent;
}
::-webkit-scrollbar-thumb {
      background-color: silver;
}
::-webkit-scrollbar-button {
      background-color: transparent;
      display:none; /*added this */
}
::-webkit-scrollbar-corner {
      background-color: transparent;
}

＆＃13;

<body>
<p style="padding-top:0; margin-top:0; text-align:right">
Here is problem --------------------------------->
</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<p style="padding-top:0; margin-top:0; text-align:right">
Here is problem --------------------------------->
</p>
</body>

＆＃13;

删除webkit浏览器滚动条的上边距css

1 个答案: