鼠标滚动局部-选项卡

最新推荐文章于 2022-12-08 22:28:36 发布

eling-

最新推荐文章于 2022-12-08 22:28:36 发布

阅读量489

点赞数 1

CC 4.0 BY-SA版权

分类专栏： javascript html+css 文章标签： javascript 鼠标 html

本文链接：https://blog.youkuaiyun.com/second_boy/article/details/50981112

javascript 同时被 2 个专栏收录

40 篇文章

订阅专栏

html+css

13 篇文章

订阅专栏

本文介绍如何使用JavaScript和HTML实现鼠标滚动时只在特定选项卡区域触发滚动效果的技术。通过实例代码，展示了如何控制鼠标滚动只在选项卡内容区域进行局部滚动。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

鼠标滚动局部-选项卡

效果如下：

html：

<body>
    <div class="box">
        <a href="javascript:;" class="btn_pre" id="btnPre">上一页</a>
        <div class="change_box">
            <ul class="change_box_list" id="changeBoxList">
                <li><a href="javascript:;" class="btn_h">See0</a></li>
                <li><a href="javascript:;" class="btn">See1</a></li>
                <li><a href="javascript:;" class="btn">See2</a></li>
                <li><a href="javascript:;" class="btn">See3</a></li>
                <li><a href="javascript:;" class="btn">See4</a></li>
                <li><a href="javascript:;" class="btn">See5</a></li>
                <li><a href="javascript:;" class="btn">See6</a></li>
                <li><a href="javascript:;" class="btn">See7</a></li>
                <li><a href="javascript:;" class="btn">See8</a></li>
                <li><a href="javascript:;" class="btn">See9</a></li>
                <li><a href="javascript:;" class="btn">See10</a></li>
                <li><a href="javascript:;" class="btn">See11</a></li>
                <li><a href="javascript:;" class="btn">See12</a></li>
                <li><a href="javascript:;" class="btn">See13</a></li>
                <li><a href="javascript:;" class="btn">See14</a></li>
                <li><a href="javascript:;" class="btn">See15</a></li>
                <li><a href="javascript:;" class="btn">See16</a></li>
                <li><a href="javascript:;" class="btn">See17</a></li>
                <li><a href="javascript:;" class="btn">See18</a></li>
                <li><a href="javascript:;" class="btn">See19</a></li>
                <li><a href="javascript:;" class="btn">See20</a></li>
                <li><a href="javascript:;" class="btn">See21</a></li>
             
               
            </ul>
        </div>
        <a href="javascript:;" class="btn_next" id="btnNext">下一页</a>
    </div>
    <div class="event_box">
        <ul class="event_list" id="eventList">
            <li><a href="javascript:;" class="">See0</a></li>
            <li><a href="javascript:;" class="">See1</a></li>
            <li><a href="javascript:;" class="">See2</a></li>
            <li><a href="javascript:;" class="">See3</a></li>
            <li><a href="javascript:;" class="">See4</a></li>
            <li><a href="javascript:;" class="">See5</a></li>
            <li><a href="javascript:;" class="">See6</a></li>
            <li><a href="javascript:;" class="">See7</a></li>
            <li><a href="javascript:;" class="">See8</a></li>
            <li><a href="javascript:;" class="">See9</a></li>
            <li><a href="javascript:;" class="">See10</a></li>
            <li><a href="javascript:;" class="">See11</a></li>
            <li><a href="javascript:;" class="">See12</a></li>
            <li><a href="javascript:;" class="">See13</a></li>
            <li><a href="javascript:;" class="">See14</a></li>
            <li><a href="javascript:;" class="">See15</a></li>
            <li><a href="javascript:;" class="">See16</a></li>
            <li><a href="javascript:;" class="">See17</a></li>
            <li><a href="javascript:;" class="">See18</a></li>
            <li><a href="javascript:;" class="">See19</a></li>
            <li><a href="javascript:;" class="">See20</a></li>
            <li><a href="javascript:;" class="">See21</a></li>
        </ul>
    </div>
    
    
    
    
</body>

style：

.box{width: 300px; height: 500px; border: 1px solid #ccc; background-color: #ccc; float: left;}
    .btn_pre,.btn_next{display: block; width: 300px; height: 50px; background-color: #693369; text-align: center; line-height: 50px; font-size: 30px; color: #ccc;}
    .change_box{width: 300px; height: 700px; background-color: #696969; position: relative; overflow: hidden;}
    .change_box_list{width: 300px; overflow: hidden; list-style: none; margin: 0px; padding: 0px; position: absolute;  left: 0px;}
    .change_box_list li{width: 300px; height: 100px; text-align: center; font-size: 40px; line-height: 100px; }
    
    .change_box_list li a{display: block; widows: 300px; height: 100px; }
    .change_box_list li .btn_h{display: block; widows: 300px; height: 100px; background-color: #f00;}
    
    
    
    .event_box{width: 300px; height: 500px; float: left; display: inline; overflow: hidden; }
    .event_list{width: 300px; overflow: hidden; list-style: none; margin: 0px; padding: 0px;}
    .event_list li{width: 300px; height: 500px; background-color: #052; font-size: 100px; line-height: 500px; color: #fff; text-align: center;}

javascript：

var btnPre = document.getElementById("btnPre");
var btnNext = document.getElementById("btnNext");
var changeBoxList = document.getElementById("changeBoxList");
var eventList = document.getElementById("eventList");
var eventListLi = eventList.getElementsByTagName("li");
var changeBoxListA = changeBoxList.getElementsByTagName("a");
var getBody = document.body;
//显示区域为几个，就写几个
var keepNum = 7;

//获取需要滚动的值(整体ul的高度减去显示区域的高度)
var hehe = changeBoxList.offsetHeight - changeBoxListA[0].offsetHeight * keepNum;

//Li的高度
var liHight = changeBoxList.children[0].offsetHeight;

//点击变量
var num = 0;    

//点击每个单独的员工
for(var i = 0; i<=changeBoxListA.length-1; i++ ){
    changeBoxListA[i].index = i;
    changeBoxListA[i].onclick = function(){
       for(var i = 0; i<=changeBoxListA.length-1; i++ ){
           eventListLi[i].style.display = "none";
           changeBoxListA[i].className = "";
       }
       eventListLi[this.index].style.display = "block";
       changeBoxListA[this.index].className = "btn_h";
    }
}

// 禁止火狐body默认滚动事件
var bodyMoveFun = function(e){
    e.preventDefault();
}    
    
var scrollFunc=function(e){
    e=e || window.event;
    if(e.wheelDelta){                       //IE/Opera/Chrome
        if(e.wheelDelta>0){
           if( num <= 0){
                changeBoxList.style.top = 0 + "px";
            }else{
                num--;
                changeBoxList.style.top = -(num * liHight ) + "px";
            }
        }else{
            //判断整体ul的top值是否大于需要滚动的值，如果大于，代表
            if( changeBoxList.offsetTop <= -hehe ){
                if( changeBoxList.offsetTop == 0 ){
                    changeBoxList.style.top = 0 + "px";
                }else{
                    changeBoxList.style.top = -hehe + "px";
                }
            }else{
                num++;
                changeBoxList.style.top = -(num * liHight) + "px";
            }
        }
    }else if(e.detail){                     //Firefox
        if(e.detail<0){
           if( num <= 0){
                changeBoxList.style.top = 0 + "px";
            }else{
                num--;
                changeBoxList.style.top = -(num * liHight ) + "px";
            }

        }else{
            //判断整体ul的top值是否大于需要滚动的值，如果大于，代表
            if( changeBoxList.offsetTop <= -hehe ){
                if( changeBoxList.offsetTop == 0 ){
                    changeBoxList.style.top = 0 + "px";
                }else{
                    changeBoxList.style.top = -hehe + "px";
                }
            }else{
                num++;
                changeBoxList.style.top = -(num * liHight) + "px";
            }
        }
    }
}
changeBoxList.onmousemove = function(){
    /*注册事件*/
    if(document.addEventListener){
        document.addEventListener('DOMMouseScroll',scrollFunc,false);   //Firefox滚动事件 
        document.addEventListener('DOMMouseScroll',bodyMoveFun,false);   //Firefox禁止body滚动
    } 
    window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome 滚动事件 
    getBody.onmousewheel=function(){                    //IE/Opera/Chrome禁止body滚动
        return false;
    }
    
}

changeBoxList.onmouseleave=function(){
    if(document.addEventListener){
       document.removeEventListener('DOMMouseScroll',scrollFunc,false);//解除Firefox滚动事件 
       document.removeEventListener('DOMMouseScroll',bodyMoveFun,false);//解除Firefox禁止body滚动
    }
    window.onmousewheel=document.onmousewheel=null;//IE/Opera/Chrome 解除滚动事件
    getBody.onmousewheel=function(){                    //IE/Opera/Chrome 解除body滚动条
        return true;
    }
    
}

PS：其中碰到的一些问题在下篇文章细说！