使有吸引力的滚动条与所有浏览器兼容

Question

我正在我的项目中开发聊天和通话应用程序。

所以有 3 个选项卡。

1. 要聊天的人
2. 拨号器拨打特定的人
3. 聊天/通话记录

在这个标签中有 3 个部分。

1. 标题
2. 聊天/通话/历史记录部分。
3. 标签切换导航器。

我使中间部分可滚动。

我想让滚动条变细。我不想使用浏览器的默认滚动条。

为此，我发现“::-webkit-scrollbar”仅适用于 chrome。

我想将此 CSS 应用到所有浏览器。

我找到了滚动插件，但我不想使用任何外部插件。我想通过使用 jquery/css/javascript 来解决这个问题。

是否有任何财产或任何东西可以解决我的问题？

Answer 1

::webkit-scrollbar 伪元素是非标准的，目前无法使此跨浏览器兼容。有充分的理由说明这还没有发展成为标准。想象一下一些触摸设备的浏览器没有滚动条或有滚动条，它们默认隐藏，仅在滚动时显示（以节省宝贵的空间）。自定义样式需要适合所有这些用例。

因此，我通常建议您不要使用此 hack 设置浏览器滚动条的样式。如果你真的需要解决方案，你可以试试jquery.scrollbar。然而，恕我直言，这不是一个可靠的解决方案。它完全依赖于 JavaScript，并且可能在某些设备上摇摆不定。

编辑：关于MDN的更多信息