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

Question

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

所以有3个选项卡。

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

在这个选项卡

有3个部分。

1. 头
2. 聊天/呼叫/历史部分。
3. 换页符导航器。

我使中间部分可滚动。

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

为此我找到了“:: - webkit-scrollbar”，它只适用于Chrome。

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

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

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

Answer 1

::webkit-scrollbar伪元素是非标准的，目前没有办法使这个跨浏览器兼容。有很好的理由，为什么这还没有发展成为标准。试想一些触摸设备的浏览器没有滚动条或滚动条，它们默认隐藏，只有滚动时才显示（以节省宝贵的空间）。自定义样式需要适合所有这些用例。

因此，我通常建议你不要使用这种黑客风格浏览器滚动条。如果你真的需要解决方案，你可以试试jquery.scrollbar。恕我直言，这是没有健全的解决方案，但是。它纯粹依赖于JavaScript，可能会在某些设备上跳跃。

编辑：更多信息MDN