自定义Firefox滚动条 - 边界半径
我正在尝试修改浏览器滚动栏的默认CSS及其对Chrome和Edge的工作正常，但不在Firefox中。有什么方法可以修改Firefox浏览器滚动栏并与Chrome和Edge同步。目前，我无法在Firefox中提供边界半径。
我使用过的代码：
/* Custom Scroll Bar */
/* Works on Firefox */
* {
scrollbar-width: thin !important;
scrollbar-color: #65676a #1e1f22 !important;
}
/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
width: 1.2rem !important;
height: 1.2rem !important;
}
*::-webkit-scrollbar-track {
background: #1e1f22 !important;
}
*::-webkit-scrollbar-thumb {
background-color: #65676a !important;
border-radius: 2rem !important;
border: 0.3rem solid #1e1f22 !important;
}
*::-webkit-scrollbar-corner {
background: #1e1f22 !important;
}
另外，我正在使用Angular Framework，如果有任何Angular库可以修改滚动条，请分享。我尝试了NGX-SCrollbar，但在此方面有一些构建问题。
I am trying to modify the default CSS of browser scrollbar and its working fine for Chrome and Edge but not in Firefox. Is there any way i can modify the firefox browser scrollbar and make it in sync with Chrome and Edge. Currently i am not able to provide border radius to Scrollbar in Firefox.
Code that i have used :
/* Custom Scroll Bar */
/* Works on Firefox */
* {
scrollbar-width: thin !important;
scrollbar-color: #65676a #1e1f22 !important;
}
/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
width: 1.2rem !important;
height: 1.2rem !important;
}
*::-webkit-scrollbar-track {
background: #1e1f22 !important;
}
*::-webkit-scrollbar-thumb {
background-color: #65676a !important;
border-radius: 2rem !important;
border: 0.3rem solid #1e1f22 !important;
}
*::-webkit-scrollbar-corner {
background: #1e1f22 !important;
}
Also, i am using Angular Framework, if there is any angular library to modify scrollbar then please share. I have tried ngx-scrollbar but having some build issue in that.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您无法使用CSS在Firefox中实现这一目标。
它将忽略
:: - WebKit属性，因为它不使用WebKit。基于铬的浏览器会接受它，因为他们使用基于WebKit的眨眼引擎。壁虎（这是Firefox的渲染引擎）仅接受您已经列出的两个标准属性：
scrollbar-Width和scrollbar-color。最好的选择（如果这是绝对的要求）是使用非本地滚动条更换。我个人认为，这些问题比获得收益更多的问题，但选择您的毒药。示例可以是完美的scrollbar ，但我敢肯定，如果您搜索搜索，还有更多。
You can't achieve that in Firefox using css.
It will ignore the
::-webkitproperties since it doesn't use webkit. Chromium-based browsers accept it, since they use Blink engine which is based on the webkit.Gecko (which is the rendering engine for Firefox) only accepts two standard properties that you have already listed:
scrollbar-widthandscrollbar-color.Your best bet (if this is an absolute requirement) is to use a non-native scrollbar replacement. Personally I think those introduce more issues than they offer gain, but pick your poison. Example could be perfect scrollbar, but I'm sure there's more out there if you search.