无边框滚动条

Question

我对滚动条有疑问。我在 google 上搜索过，但没有找到我想要的。我想要像 YouTube 上那样的滚动条。没有缩放 web 并且有黑色的大边框。

https://i.stack.imgur.com/n0h0w.png
https://i.stack.imgur.com/C9pts.png

一号link就是我想要的样子。网站内容的透明边框。 2号是我的。大边框。

感谢您的帮助。

Answer 1

您可以使用这些选择器设置滚动条的宽度和边框颜色，

这与您在第一张图片中提到的非常接近，但可以根据需要进行调整

Live example Source W3S

/* width */
::-webkit-scrollbar {
  width: 8px;
  background : transparent;
  border-radius: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  border-radius: 10px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #818181;
  border-radius: 10px;
  width : 8px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #8F8F8F; 
}

此代码将保证透明的滚动条背景，但由于它不覆盖内部 divs 它将采用 body bg-color 并将显示在您的 [=26 旁边=]s ，如果滚动条旁边有 divs 并且颜色与主体颜色不同，即使它不是，也会给人一种背景颜色的错觉。 Youtube 不让不同的颜色 div 出现在栏的两侧，因此不会影响滚动条的外观

无边框滚动条

Scrollbar without border

html

css

scrollbar