样式滚动条覆盖到右边框答案

【问题标题】：Styling scrollbar to overlay to border right样式滚动条覆盖到右边框
【发布时间】：2021-06-25 05:41:13
【问题描述】：

我在设置这样的滚动条时遇到问题。是否可以这样设置样式？

【问题讨论】：

【解决方案1】：

是的，可以设置滚动条的样式。

对于chrome浏览器，你可以使用这些sn-ps：

::webkit-scrollbar  
::webkit-scrollbar-thumb  
::webkit-scrollbar-track

要将您的样式应用于所有浏览器，您可以使用这些 JS 库：

Overlay Scrollbars 或 Simple Bar

【讨论】：

【解决方案2】：

您可以使用代码：

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
 
::-webkit-scrollbar-thumb {
  background: #555; 
  border-radius: 10px;
  width: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: #333; 
}

不能减小滚动条轨道的宽度，可以休息。另外，请注意，您无法更改 Firefox 和旧版 Edge 的滚动条样式。

【讨论】：

感谢您的回复有没有办法将滚动条重叠到 div 的右侧边框？

【解决方案3】：

您可以使用这些选择器进行设计，但不推荐。

::webkit-scrollbar  
::webkit-scrollbar-thumb  
::webkit-scrollbar-track

我认为最好隐藏滚动条并创建由 javascript 代码移动的假滚动条。
你可以用 display: none 属性隐藏它

【讨论】：

非常感谢您的建议。我会尝试用 javascript 来做到这一点:)