在前端开发中，我们经常需要进行页面的滚动操作。但是，不同浏览器对于滚动条位置的处理方式却不尽相同，这给前端开发带来了不少麻烦。为了解决这个问题，我们可以使用一个 npm 包 normalize-scroll-left。
什么是 normalize-scroll-left
normalize-scroll-left 是一个用于解决滚动条位置兼容性问题的 npm 包。它主要解决的问题是，不同浏览器对于滚动条位置的处理方法不同，导致在页面中使用 jQuery 等 JavaScript 框架对滚动条进行操作时，无法保证在不同浏览器上的一致性。
安装 normalize-scroll-left
要使用 normalize-scroll-left，我们需要首先安装它。安装方法非常简单，只需要在终端中执行以下命令即可：
npm install normalize-scroll-left
使用 normalize-scroll-left
安装好 normalize-scroll-left 后，我们就可以使用它来解决滚动条位置兼容性问题了。使用方法非常简单，只需要在需要解决兼容性问题的地方引入该 npm 包即可。
import normalizeScrollLeft from 'normalize-scroll-left';
const container = document.getElementById('container');
const scrollLeft = normalizeScrollLeft.get(container);上面的代码中，我们先通过 getElementById 方法获取了一个 DOM 元素 container，然后使用 normalizeScrollLeft.get 方法获取该元素的滚动条位置，这样就可以保证不同浏览器上的位置一致了。
除了 get 方法外，normalize-scroll-left 还提供了一些其它的方法，可以根据需要进行调用。具体的 API 文档可以在 normalize-scroll-left 的 github 主页上查看。
示例代码
为了更好的理解 normalize-scroll-left 的使用方法，我们可以看一个使用它的实际示例代码。
-- -------------------- ---- -------
--------- -----
------
------
---------------------------- ------------
-------
------
---- --------------------- --------------------------------------------------------------------
-------
-------
----
-----------
-----------
-----------
-----
--------
-------
----
-----------
-----------
------------------
-----
----
-----------
-----------
------------------
-----
----
-----------
-----------
------------------
-----
----
-----------
-----------
-----------------
-----
----
-----------
-----------
-------------------
-----
--------
--------
------
------- ----------------------------------------------------------------------------
------- -------------------------------------------------------------
--------
------------ -
----- --------------- - --------------------------------------------
-- ----------------
------------------------------------ -
----- ---------- - ------------------------------
------------------------
---
---
---------
-------
-------上面的代码中，我们创建了一个包含表格的 div 元素，并在其中设置了 overflow-x 属性为 auto，以便在表格过宽时能够出现滚动条。
在 JavaScript 代码中，我们通过 getElementById 方法获取了该 div 元素，并在其滚动事件中获取了其的滚动位置，并将该值输出到控制台中。
通过运行该示例代码，我们可以在不同浏览器中测试其兼容性，从而验证 normalize-scroll-left 的作用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/95081