在现代的网页开发中，滚动动画效果已经成为了一种普遍的需求。而实现滚动动画效果，需要用到一种平滑滚动（smoothscroll）技术。在前端开发过程中，有一种便捷的 npm 包叫做 smoothscroll-polyfill-better-targetting，本篇文章将会详细介绍它的使用方法。
安装
首先，我们需要使用 npm install 命令安装 smoothscroll-polyfill-better-targetting：
npm install smoothscroll-polyfill-better-targetting --save
导入
在平时的使用中，我们可以直接在 JavaScript 文件中导入 smoothscroll-polyfill-better-targetting，代码如下：
import 'smoothscroll-polyfill-better-targetting';
使用
在导入 smoothscroll-polyfill-better-targetting 之后，我们就可以愉快地在代码中实现平滑滚动了。我们只需要在需要的元素上绑定事件，然后调用 element.scrollIntoView 方法，即可实现平滑滚动。代码如下：
const element = document.querySelector('.smooth-scroll'); element.addEventListener('click', () => { element.scrollIntoView({ behavior: 'smooth' }); });
在实现平滑滚动之前，我们需要先使用 scrollPolyfill 方法初始化，以兼容不支持平滑滚动的浏览器。代码如下：
import smoothscroll from 'smoothscroll-polyfill-better-targetting'; smoothscroll.polyfill();
示例
以下是一个使用 smoothscroll-polyfill-better-targetting 实现平滑滚动的示例：
-- -------------------- ---- ------- --------- ----- ----- --------------- ------ ----- ---------------- ----- --------------- ---------------------------- ------------------- ------------- ------ ------------ ------- ----- ---- - ------- -- -------- -- - ------- - ------- ------ -------- ----- ---------------- ------- ------------ ------- ---------- ----- - -------- ------- ------ ----- ---- ------ -------------------------- ------ ---------------------------- ------ -------------------------------- ----- ------ -------- ---------- ---- ---------- -------- ----------- ----- ---------- -------- ------------- ------- ---------- ------- ----------------------------------------------------------------------------------------------- -------- ------------------------ ----- -------- - ------------------------------ ---- --------------------- -- - ------------------------------ - -- - ------------------- ----- ---- - -------------------------- ----- ------ - ----------------------------- ----------------------- --------- -------- --- --- --- --------- ------- -------展开代码
总结
通过使用 npm 包 smoothscroll-polyfill-better-targetting，我们可以方便地实现网页平滑滚动效果。在实际开发过程中，平滑滚动效果已经成为了一个非常常见的需求。希望这篇文章对大家有帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600558e981e8991b448d63ae
