欢迎来到电脑知识网
希望你能够在这里获取到你想要了解的知识

js监听浏览器滚动条的位置

2020-07-21 10:56:13


有时候我们需要监听浏览器滚动条的位置,然后根据不同的位置动态对元素进行调整,下面看示例:  

var scrollFunc = function (e) { 
    e = e || window.event; 
    if (e.wheelDelta) { //第一步:先判断浏览器IE,谷歌滑轮事件    
     if (e.wheelDelta > 0) { //当滑轮向上滚动时 
        console.log(document.documentElement.scrollTop); 
       if(document.documentElement.scrollTop<100){
            document.querySelector(".headerMiddle").classList.remove("fixedNavBar");
       }else{
        document.querySelector(".headerMiddle").classList.add("fixedNavBar");
       }

     } 
     if (e.wheelDelta < 0) { //当滑轮向下滚动时 
        console.log(document.documentElement.scrollTop); 
        if(document.documentElement.scrollTop<100){
            document.querySelector(".headerMiddle").classList.remove("fixedNavBar");
       }else{
        document.querySelector(".headerMiddle").classList.add("fixedNavBar");
       }
     } 
    } else if (e.detail) { //Firefox滑轮事件 
     if (e.detail> 0) { //当滑轮向上滚动时 
        console.log(document.documentElement.scrollTop); 
        if(document.documentElement.scrollTop<100){
            document.querySelector(".headerMiddle").classList.remove("fixedNavBar");
       }else{
        document.querySelector(".headerMiddle").classList.add("fixedNavBar");
       }
     } 
     if (e.detail< 0) { //当滑轮向下滚动时 
        console.log(document.documentElement.scrollTop); 
        if(document.documentElement.scrollTop<100){
            document.querySelector(".headerMiddle").classList.remove("fixedNavBar");
       }else{
        document.querySelector(".headerMiddle").classList.add("fixedNavBar");
       }
     } 
    } 
   }
if (document.addEventListener) {//firefox 
    document.addEventListener('DOMMouseScroll', scrollFunc, false); 
   } 
   //滚动滑轮触发scrollFunc方法 //ie 谷歌 
   window.onmousewheel = document.onmousewheel = scrollFunc;

这段代码我们需要从下往上看,最下面是给window对象的onmousewheel事件和document对象的onmousewheel事件添加一个回调函数,

往上看是在给火狐浏览器添加回调函数,这里主要是为了保持兼容性. 

在网上看就是回调函数了,这个示例是我刚刚写一个固定导航栏的时候写的,大家可以参考一下,scrollTop这里的数据不是特别的精确大家在处理的时候一定要注意,小于100会显示0.