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

Question

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

所以有 3 个选项卡。

1. 聊天对象
2. 拨号器调用特定的人
3. 聊天/通话记录

在此选项卡中有 3 个部分。

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

我使中间部分可滚动。

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

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

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

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

有什么属性(property)或任何东西可以解决我的问题吗？

Answer 1

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

因此，我通常建议您不要使用此技巧来设置浏览器滚动条的样式。如果您确实需要解决方案，您可以尝试 jquery.scrollbar 。然而，恕我直言，这并不是一个可靠的解决方案。它纯粹依赖于 JavaScript，并且可能在某些设备上出现抖动。

编辑:有关 MDN 的更多信息