简介
fsvs 是一个轻量级的前端页面滚动监听库，它通过监听浏览器窗口滚动事件，触发相应的回调函数来实现对页面滚动位置的监控和控制。在前端页面开发中，我们经常需要根据滚动位置来实现各种效果，如导航栏固定、图片懒加载、无限滚动等。fsvs 可以让这些功能的实现变得更加简单。
安装
使用 npm 进行安装：
npm install fsvs
或者直接下载压缩包 fsvs.zip，解压后将 dist/fsvs.min.js 引入项目即可。
使用方法
- 在 HTML 中引入 fsvs.min.js：
<script src="path/to/fsvs.min.js"></script>
- 初始化 fsvs：
var fsvs = new FSVS({
// 配置选项...
});在初始化时可以传入一些配置选项，如下所示：
-- -------------------- ---- -------
--- ---- - --- ------
------ ---- -- ----------
------ ---- -- ----------
------- --------------- -- ----
---------- ----------- -- --------------- - -------------
------------------ ----- -- ------------
---------------- ----- -- ------------
--------- ------ -- -------- ---- ---
----------- ----- -- --------------
----------- ----- -- -----
----- ---- -- ----
---其中，fixedItems 可以设置固定在页面上的元素，在滚动时始终保持不变。例如：
var fsvs = new FSVS({
fixedItems: '#header, #footer'
});- 定义回调函数：
fsvs.registerCallback('fsvsEnter', function(index, slide) {
// 进入某个滑块时的回调函数
});
fsvs.registerCallback('fsvsExit', function(index, slide) {
// 离开某个滑块时的回调函数
});- 编写 HTML 代码：
<div class="slide" data-fsvs-slide>...</div> <div class="slide" data-fsvs-slide>...</div> <div class="slide" data-fsvs-slide>...</div> ...
每个需要监控的元素都需要加上 data-fsvs-slide 属性。
示例代码
下面是一个简单的示例代码，实现了一个滚动菜单和一些滚动效果：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----------- ------------
------- -----------------------------------
-------
------ -
------- ------
----------------- -----
-
----- -
--------- ------
---- --
----- --
------ --
------- -----
----------------- -----
-------- -----
-
----- - -
-------- -------------
-------- -----
------------- -----
---------- -----
------ -----
---------------- -----
-
----- -------- -
------ -----
----------------- -----
-
--------
-------
------
---- ----------
-- -------------
- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------