在网页开发中，平滑滚动效果对于提升用户体验起到了很大的作用。但是，不同浏览器对于平滑滚动的支持不尽相同，因此我们需要使用 polyfill 来实现一致的效果。其中，smoothscroll-polyfill 是一个常用的解决方案。
安装和导入
首先，需要使用 npm 安装该包：
npm install smoothscroll-polyfill
然后，在项目中导入：
import smoothscroll from 'smoothscroll-polyfill';
使用方法
导入 smoothscroll-polyfill 后，我们可以直接调用 smoothscroll.polyfill() 方法来启用平滑滚动：
smoothscroll.polyfill();
此时，无论在哪个浏览器中，window.scroll() 和 element.scrollIntoView() 方法都将自动变成平滑滚动效果。
注：若使用 Vue.js 或 React 等框架，则应该在组件的 mounted 钩子函数中调用 smoothscroll.polyfill()。
高级选项
smoothscroll-polyfill 还提供了一些高级选项以满足不同需求。以下是一些常用选项的示例：
非线性缓和效果
使用 smoothscroll.polyfill(timing) 方法来启用非线性缓和效果：
smoothscroll.polyfill({
// timing 函数用于计算进度，返回值应为 0 到 1 之间
timing: function(timeFraction) {
return timeFraction ** 2;
},
});在上述示例中，timing 函数为时间的平方，即使用二次函数实现非线性缓和效果。
滚动结束事件
使用 options 参数来添加滚动结束事件：
smoothscroll.polyfill({
// onScrollEnd 用于定义滚动完成后的操作
onScrollEnd: function() {
console.log('Scrolling ended.');
},
});覆盖默认行为
使用 options 参数来覆盖默认行为：
smoothscroll.polyfill({
// scrollTarget 指定了需要滚动的元素
scrollTarget: document.querySelector('#my-element'),
// header 可以用于指定固定的页眉高度
header: document.querySelector('.header'),
});在上述示例中，scrollTarget 和 header 分别指定了需要滚动的元素和固定的页眉高度。
示例代码
下面是一个完整的示例代码。请注意，在 Vue.js 中实现类似的效果时，需要使用 $refs 来获取组件内部的 DOM 元素。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------- ------ ------------
-------
---- -
------- --
-------- --
------------ -----------
-
------- -
--------- ------
---- --
----- --
------ --
------- -----
----------------- --------
------ ------
-------- -----
---------------- -------
------------ -------
-
---- -
-------- -----
---------------- -------
------------ -------
------- -----
-
-------- -
------- ------
-------- -----
---------------- -------
------------ -------
-
--------- -
----------------- --------
-
--------- -
----------------- --------
-
--------- -
----------------- --------
-
--------
-------
------
---- ---------------
---------- ------ ---------
------
---- ------------
-
- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------