js和jquery实现页面滚动监听

转载

mob604756f89f2f 2018-07-05 12:44:00

js和jquery实现页面滚动监听

一、总结

一句话总结：`onscroll方法`和监听页面元素的高度都可以实现滚动监听。

1、`onscroll方法实现滚动监听`的核心代码是什么？

    <body onscroll="scroll()">

2、通过检测元素的高度实现滚动监听？

//遍历楼层
    jumbotron.each(function() {
        var $this = $(this),
            jumbotronTop =$this.offset().top;//获取当前楼层的高度
        if (top > (jumbotronTop - 200)) {
            currentID = "#" +　$this.attr("id");//每个小于top的楼层都会赋值一次，逐层覆盖替换，最后一层才是最后的id值
        }
        else {
            return false;
        };
    })

二、`onscroll方法实现滚动监听`

js监听html页面的上下滚动事件

最近在一个项目中，在写前端页面的时候，想像以前做Android时在页面时刻监听上下滚动的事件，查找资料发现由鼠标或类似用户动作触发的事件有以下图示：

js和jquery实现页面滚动监听_js

不多说了，直接上代码了，经过测试可以使用：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Dome</title>
        <script type="text/javascript">  

            function scroll(){
                //console.log("打印log日志");实时看下效果
                console.log("开始滚动！");
            }

            var scrollFunc = function (e) {  
                e = e || window.event;  
                if (e.wheelDelta) {  //第一步：先判断浏览器IE，谷歌滑轮事件               
                    if (e.wheelDelta > 0) { //当滑轮向上滚动时  
                        console.log("滑轮向上滚动");  
                    }  
                    if (e.wheelDelta < 0) { //当滑轮向下滚动时  
                        console.log("滑轮向下滚动");  
                    }  
                } else if (e.detail) {  //Firefox滑轮事件  
                    if (e.detail> 0) { //当滑轮向上滚动时  
                        console.log("滑轮向上滚动");  
                    }  
                    if (e.detail< 0) { //当滑轮向下滚动时  
                        console.log("滑轮向下滚动");  
                    }  
                }  
            }
            //给页面绑定滑轮滚动事件  
            if (document.addEventListener) {//firefox  
                document.addEventListener('DOMMouseScroll', scrollFunc, false);  
            }  
            //滚动滑轮触发scrollFunc方法  //ie 谷歌  
            window.onmousewheel = document.onmousewheel = scrollFunc;



        </script>  

    </head>
    <body onscroll="scroll()">
        <div style="height: 2000px;background-color: aqua;"></div>
    </body>
</html>

如果有没有使用过console.log(“”)的，我这里截下图看下吧（谷歌浏览器）：

js和jquery实现页面滚动监听_js_02

三、通过检测元素的高度实现滚动监听

jQuery实现滚动监听

1.设计思路

1）获取窗口滚动高度；

2）获取附加导航栏；

3）获取导航栏下的所有li；

4）通过相同class获取所有监听元素；（此例中为jumbotron巨幕）

5）遍历所有监听元素，若当前元素距离文档高度小于文档滚动条的垂直偏移量（即滚动高度），获取当前元素ID。（此处获取的ID值，实际为ID值覆盖替换，因为存在有多个元素的e当前元素距离文档高度小于文档滚动条的垂直偏移量的情况，但只有最后的ID是有效值，因

为前边的会被后边的覆覆盖替换掉）

6）给对应的导航添加class（bootstrap中为给li添加active），先移出已有的active，然后再添加。

实现代码
$(document).ready(function() {
//定义全局变量，获取附加导航栏、导航列表、链接、各楼层、各楼层距离文档的高度
  var menu = $("#add-nav"),
    lists = menu.find("li"),
    jumbotron = $(".jumbotron"),
    currentID;
  $(window).scroll(function() {
//获取文档滚动高度
    var top = $(document).scrollTop();

//遍历楼层
    jumbotron.each(function() {
        var $this = $(this),
            jumbotronTop =$this.offset().top;//获取当前楼层的高度
        if (top > (jumbotronTop - 200)) {
            currentID = "#" +　$this.attr("id");//每个小于top的楼层都会赋值一次，逐层覆盖替换，最后一层才是最后的id值
        }
        else {
            return false;
        };
    })
//给相应楼层对应的附加到导航添加class
        //首先清除所有active
        var currentActive = menu.find(".active");
        if (currentID && currentActive.find("a:eq(0)").attr("href") != currentID) {
          currentActive.removeClass("active");

        //给相应导航添加class
          menu.find("[href="+currentID+"]").parent().addClass("active");
        }
  })

});