@better-scroll/core 是一个用于前端开发的 JavaScript 库，它提供了一个可靠的、高性能的滚动方案。本文将介绍如何使用 @better-scroll/core ，包括安装、使用示例、API 以及一些最佳实践。
安装
使用 npm 安装 @better-scroll/core ：
npm install @better-scroll/core --save
在项目中引入 @better-scroll/core ：
-- -------------------- ---- ------- ------ ------- ---- --------------------- ------ --------- ---- -------------------------- ---------------------- ----- ------- - ---------------------------------- ----- ------ - --- ---------------- - ---------- -- --
这里通过使用 use 方法，将 Scrollbar 插件注册在 BScroll 上，以便在 scroll 实例中使用。接着我们通过 querySelector 获取需要滚动的元素，并传入到 BScroll 的构造函数中。注意需要传入的第二个参数是一个配置对象，我们在这里配置 scrollbar 选项，以便滚动时，会自动添加滚动条。
使用示例
在实际开发中，需要对元素进行一些样式设置，以便更好的进行滚动。以下是一个滚动元素 wrapper 的 html 结构。
<div class="wrapper">
<ul>
<li>example item 1</li>
<li>example item 2</li>
<li>example item 3</li>
...
</ul>
</div>接下来，通过 @better-scroll/core 去实例化滚动元素暴露以下常用的 API ：
-- -------------------- ---- ------- ------ ------- ---- --------------------- ------ --------- ---- -------------------------- ---------------------- ----- ------- - ---------------------------------- ----- ------ - --- ---------------- - ---------- -- -- -- ------ ----- ------------------ ----- ------------------ ---- -- ------- ------------------ ---- -- -------- -------------------- -- ------- ---------------- --------------- -- ------ ------------------- ----- -- - ------------------ ------ --
API
scrollBy(x, y, time, easing)滚动指定的距离，可选 time 和 easingscrollTo(x, y, time, easing)滚动到指定的位置，可选 time 和 easinggetPosition()获取当前滚动的位置信息disable()禁止滚动enable()启动滚动on(type, fn)事件监听
更多关于 API 的信息可以参考 官方文档。
最佳实践
- 为了避免滚动元素无法响应滚动事件，需要为其添加如下样式：
-webkit-overflow-scrolling: touch;。 - 如果需要动态添加或删除子元素，可以使用
refresh方法更新滚动区域。 - 如果需要懒加载或刷新滚动区域，可以调用
refresh方法或pullup事件。
总结
在本文中，我们学习了 @better-scroll/core 的用法，包括安装、使用示例、API 和最佳实践，相信对于前端开发者来说已经足够了解如何使用该插件，去优化我们的项目中的滚动问题。如果您想深入了解更多关于 @better-scroll/core 的内容，可以查看 官方文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f6e9999a9b7065299ccb9f3