css滚动条顶部和底部角落没有变化

Question

   ul.list_view::-webkit-scrollbar {
background: lightyellow;
width: 12px;
   }
    ::-webkit-scrollbar-track {
 -webkit-box-shadow: inset 0 0 6px #57c5a0;
 border-radius: 10px;
}
  ::-webkit-scrollbar-thumb {
 border-radius: 10px;
 background:#57c5a0;
-webkit-box-shadow: inset 0 0 6px #000000;
}

嗨。这是自定义滚动条的代码。正如您可以在顶部角落和滚动条的底角看到的那样，仍然有一个空白区域。我不知道如何让它消失。请帮忙。

Answer 1

它不是白色的，而是在你的css中指定的淡黄色。您只需将背景从lightyellow更改为transparent。

ul::-webkit-scrollbar {
    background: transparent;
}

如果您希望拥有完全透明的曲目，请同时删除::-webkit-scrollbar-track中的框阴影。

Answer 2

您可以在此处详细了解自定义webkit滚动条

SAMPLE

::-webkit-scrollbar {
    width: 12px;
}
 
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px;
}
 
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}

<br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

Source

Answer 3

这是一个解决方案。从-webkit-box-shadow。

中删除webkit-scrollbar-track

body {
  min-height: 1000px;
  background-color: #d5d5d5;
}
::-webkit-scrollbar {
  width: 12px;
}
::-webkit-scrollbar-track {
  border-radius: 10px;
  background: lightyellow;
}
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: #57c5a0;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}