在现代网页设计中，滚动是页面交互的重要组成部分，尤其是涉及到页面文档配置滚动控制时。著名的onepage风格页面就采用了类似于滚动的机制来展现页面不同内容。为解决这一领域的问题，section-scroller包应运而生。“section-scroller”是一个小型的JavaScript库，可以帮助你更轻松的创建一些内容页面，并提供流畅的滚动控制。本篇文章将详细介绍section-scroller的使用方法及其具有的指导意义。
特点
支持页面自适应：我们不可能知道所有的浏览器的宽高。因此，section-scroller使用现代浏览器的API来检测窗口大小 和 分辨率，从而推导出当前可见区域的宽高度，从而实现页面自动适应的效果。
内置 CSS 动画：大多数网页设计都依赖于动画和特效来强调各种内容，section-scroller的设计者也深刻认同这一点，因此在设定sidenav主题时，内置了一些优雅而简单的CSS动画。代码量少，少了很多代码编写的烦恼。即使你的项目里有特殊的要求，section-scroller包也能帮助你在CSS代码中建立定制的动画。
不需要jQuery：虽然section-scroller是一个小型的JavaScript库，但不需要使用jQuery。虽然在现代web开发中，使用jQuery已经成为了普遍趋势，但是section-scroller设计师认为，我们应该为那些想要创造出小而简单的网页而设计工具。
安装及使用
安装section-scroller需要使用npm，运行以下命令即可操作：
npm install section-scroller --save
配置及使用
下面的例子看起来像是一堆无序的页面，但是使用section-scroller之后，页面上的元素之间都可以通过视差滚动的方式连接起来。
先看下面的 HTML 结构：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
-----------------------
----- ---------------- ----------------------------------------
-------
------
-------- ------------------- ---------------------
----------- --------
---------- ---- ---- -------
----------
-------- ------------------- ---------------------
----------- --------
------- -- --- ------- -- ---------------- --------------
----------
-------- --------------------- -----------------------
----------- ----------
---- --- -- - ------- --------- ---- -- ----- --- -- - -------------
----------
-------- -------------------- ----------------------
----------- ---------
------ ------ -- ----- --- --- -- ---------------
----------
------- -----------------------------------------------
--------
--- ------------------
---------
-------
-------现在，源文件文件夹应该含有以下两个文件：
- section-scroller.min.css
- section-scroller.min.js
引入内部例行的额外CSS和JS，目的在于应用初始以及滚动效果：
-- -------------------- ---- -------
------
----- ---------------- --------------------------------
-------
------
------- ---------------------------------------
-------------------
-------------------
-------------------
-------------------
--------
--- ------------------
---------
-------当然使用ScetionScroller()导入之后，你仍然可以通过以下代码对div/section等DOM元素进行手动绑定：
new SectionScroller({
sectionSelector: document.querySelectorAll('div')
});你同样可以自定义全局的主题和静态导航栏/动态导航栏线性/环状的配置，应对自己想要实现的功能：
-- -------------------- ---- -------
--- -----------------
-- ----------
------ ---------
-- --------------- -----
---------------- ------
-- -------------- ------
---------------- -----------------
-- --------------- -----
------------- ---------
-- --------------- -----
--------------- -----
-- --------------- -----
---------------- --------
-- --------------- ------------
----------------- -----------
---示例演示
你可以在文件夹example/example-basic.html中找到一个更完整的示例，或者也可以在原始文档中获取更多内容，包括完整的API文档和选项信息。
章节小结
SectionScroller是一种用于快速制作可导航页面的JavaScript库，其作用是使您的页面滑动更加平滑，更加自适应。我们可以通过npm安装SectionScroller，并将其用作实现导航页面的快捷方法。在使用过程中，我们可以设置一些参数和配置，以实现一些特定的功能和视觉效果。SectionScroller的维护及开发已经得到完善，是一款使用广泛、文档完善的前端工具，值得你的学习和掌握。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005682681e8991b448e444f