# 滚动监听

**Repository Path**: island_tears/scrollspy

## Basic Information

- **Project Name**: 滚动监听
- **Description**: 高性能滚动监听 + 导航高亮 + 点击导航滚动跳转 + sroll节流
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 4
- **Forks**: 0
- **Created**: 2019-12-28
- **Last Updated**: 2024-06-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 滚动监听

#### 介绍

1、原生js编写，ES6面向对象写法，所以不支持IE，要在IE上使用需要转成ES5。

2、不依赖定位属性。

2、可以一次绑定多个导航栏。

3、有离开监听元素检测。

4、页面加载完成时会检测一遍有没有符合条件的监听元素。

5、点击导航条可以滚动到指定监听元素。

6、性能强大，滚动条一路下（上）拉，每次拉到指定的位置，只会执行一次修改DOM。

7、性能强大，有节流措施。

8、既可以基于浏览器窗口监听，也可以基于DOM元素监听。




#### 使用说明

1、在项目中导入 scrollSpy.js 文件。

2、在需要监听的元素的父元素里加上 class = "scrollSpy" 。

当监听的 DOM 元素是 body 时就则基于浏览器窗口监听。如果是其它 DOM 元素，则基于具体的 DOM 元素监听。

3、在需要监听的元素的父元素里加上 data-target = "" 引号里填导航的 class 名或 id 名或 元素标签名，id 用#开头，class 用.开头。

4、在需要监听的元素的父元素里加上 data-offset = "" 引号填监听元素距离父元素顶部的偏移像素， 默认为 0 px。

5、在需要监听的元素加上 class = "spy" 不可以自定义。

6、导航栏需要加上具体的 class 或者 id 可以自定义，和上面第3点对应上就可以 。
 
7、导航栏需要高亮的元素需要加上  class="spy-nav-item" 不可以自定义。

8、实例化 ScrollSpy 类，ScrollSpy 类需要一个匿名对象作为参数，该匿名对象的作用如下

delay 属性：设置执行 sroll 事件的间隔。

target 属性：设置滚动指定位置时，对当前导航元素的操作函数。

function (a,target,targetNav,targetSpy) 

该函数有4个参数，第一个参数是导航元素的循环下标，可以用来判断当前元素是父元素的第几个子元素，第二个是当前导航元素（即 class ="nav-item" 的元素），第三个是导航元素的父元素（就是导航栏，即 class="nav" ），可以用来判断具体的导航栏，第四个是导航栏对应的监听元素（就是 class = "scrollSpy"），可以判断具体的监听元素。

order 属性：设置滚动指定位置时，对非当前导航元素的操作函数。

参数同上。

top 属性：向上离开监听元素时对导航元素的操作函数。

参数同上。

top 属性：向下离开监听元素时对导航元素的操作函数。

参数同上。

enter 属性：页面加载完成时，判断第一个监听元素是否在指定的范围内，如果在，对第一个导航元素的操作函数。

function (target,targetNav,targetSpy)

该函数第一个参数是第一个导航元素，第二个参数是第一个导航元素的父元素，第三个参数是导航元素对应的监听元素的父元素。








演示

```
<div  class="scrollSpy" data-target=".nav" data-offset="150" >
    <div class="spy">1</div>
    <div class="spy">2</div>
    <div class="spy">3</div>
    <div class="spy">4</div>
    <div class="spy">5</div>
    <div class="spy">6</div>
    <div class="spy">7</div>
    <div class="spy">8</div>
    <div class="spy">9</div>
    <div class="spy">10</div>
</div>

<ul class="nav">
    <li class="spy-nav-item">一</li>
    <li class="spy-nav-item">二</li>
    <li class="spy-nav-item">三</li>
    <li class="spy-nav-item">四</li>
    <li class="spy-nav-item">五</li>
    <li class="spy-nav-item">六</li>
    <li class="spy-nav-item">七</li>
    <li class="spy-nav-item">八</li>
    <li class="spy-nav-item">九</li>
</ul>


<script>

    window.onload = function () {

        new ScrollSpy({
            delay:10,
            target: function (a,target,targetNav,targetSpy) {
                target.classList.add("active");
            },
            order:  function (a,target,targetNav,targetSpy) {
                target.classList.remove("active");
            },
            top:    function (a,target,targetNav,targetSpy) {
                target.classList.remove("active");
            },
            bottom: function (a,target,targetNav,targetSpy) {
                target.classList.remove("active");
            },
            enter:  function (target,targetNav,targetSpy) {
                target.classList.add("active");
            }
        });

    };
</script>

```