在响应式设计中，我们常常需要确保页面在不同的设备上都能够正确显示。不幸的是，有些浏览器可能会使用不同的滚动条样式，导致页面显示不一致的问题。本文将介绍以下两种方法来解决这个问题：
- 使用 JavaScript 模拟滚动条样式
- 使用 CSS 自定义滚动条样式
1. 使用 JavaScript 模拟滚动条样式
如果您想要确保在所有设备上都使用相同的滚动条样式，您可以使用 JavaScript 来模拟滚动条。
这种方法可以使用一些 JavaScript 库来轻松地实现，例如 jQuery 和 iScroll。以下是一个使用 jQuery 实现模拟滚动条样式的示例代码：
-- -------------------- ---- -------
---------------------------- -
-- ---- --- ------- ---- - --- ---- --- --- ---- ------ -- --- --------
--- -------- - ----------
------
--------- --------
----------- --------
--
------------------------
-------------------
-- --- - --- -- --- -- --- ---------- -------
--- -------- - ----------
---------------------------
------
--------- -------
---------------- ------ -- ------ ----- --- --- ---------
------------- --------
--
--------------------
-- --- --- ---------
--- ---------- - ----------
----------------------
--------------------
-- --------- --- ------ -- --- ---------
--- --------------- - ------------------ - ----------------------- - ------------------
-- --- --- ------ -- --- ---------
-----------------------------------
-- ---- --- ------ ----- -- ------ --- --------- --------
--------------------- ---------- -
--- --------- - ---------------------
--- ------------ - ---------- - ----------------------- - ------------------
--------------------- --------------
---
---此代码将页面的主要内容包装在一个具有相同高度的 div 中，然后将滚动内容添加到这个 div 中。然后，添加一个滚动条 div，并使用 JavaScript 计算滚动条的高度和位置。
2. 使用 CSS 自定义滚动条样式
另一种方法是使用 CSS 自定义滚动条样式。这种方法使用 CSS 属性 ::-webkit-scrollbar，允许我们自定义滚动条的样式，例如颜色、宽度和形状。以下是一个示例代码：
-- -------------------- ---- ------- ------------------- - ------ ---- - ------------------------- - ----------------- -------- - ------------------------- - ----------------- ----- -------------- ---- - ------------------------------- - ----------------- ----- -
这段 CSS 代码会将 webkit 内核的浏览器（如 Chrome 和 Safari）的滚动条样式设置为带有 8px 宽度的灰色条和圆角矩形滚动块，当鼠标悬停在滚动块上时，将变为黑色。
需要注意的是，不是所有的浏览器都支持这个属性，这意味着在一些浏览器上滚动条样式可能会变得不兼容。
结语
在本文中，我们介绍了两种解决页面滚动条样式不兼容的方法，分别是使用 JavaScript 模拟滚动条和使用 CSS 自定义滚动条样式。尽管这两种方法都具有可行性，但它们也都有自己的缺点和注意事项。为了确保您的页面在不同设备上都能够正确显示，请谨慎考虑哪种方法最适合您的情况。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67ce0645e46428fe9e7d0635