封装自定义滚动条

最新推荐文章于 2023-03-01 17:34:44 发布

xyphf_和派孔明

最新推荐文章于 2023-03-01 17:34:44 发布

阅读量610

点赞数

分类专栏： DOM&BOM操作文章标签：滚动条

本文链接：https://blog.csdn.net/xyphf/article/details/74529570

版权

DOM&BOM操作专栏收录该内容

64 篇文章 0 订阅

订阅专栏

封装自定义滚动条

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义滚动条</title>
<style>
*{margin:0;padding:0;list-style:none;}
#div1{width:1000px;height:500px;border:1px solid #666;margin:0 auto;margin-top:20px;}
#div2{float:left;width:970px;height:498px;border:1px solid #666;overflow: hidden;}
#div2 ul{width:970px;height:600px;position:relative;background:red;}
#div3{float:left;width:26px;height: 498px;border: 1px solid #666;position:relative;}
#div4{width: 26px;height:50px;background:#ccc;position:absolute;left:0;top:0}
</style>
<script src="addMouseWheel2.js" type="text/javascript"></script>
<script>
window.onload=function(){
    var oWarp=document.getElementById('div1');
    var oBar=document.getElementById('div4');
    var oBarParent=document.getElementById('div3');
    var oDiv2=document.getElementById('div2');
    var oUl=oDiv2.getElementsByTagName('ul')[0];

    oBar.onmousedown=function(ev){
        var oEvt=ev||event;
        var disY=oEvt.clientY-oBar.offsetTop;
        document.onmousemove=function(ev){
            var oEvt=ev||event;
            var l=oEvt.clientY-disY;
            //限定
            setContentPos(l)
        };
        document.onmouseup=function(){
            document.onmousemove=null;
            document.onmouseup=null;
        };
        return false;
    };

    function setContentPos(l){
        if(l<0) l=0;
        if(l>oBarParent.offsetHeight-oBar.offsetHeight)
        l=oBarParent.offsetHeight-oBar.offsetHeight-2;
        oBar.style.top=l+'px';
        var scale=oBar.offsetTop/(oBarParent.offsetHeight-oBar.offsetHeight);
        oUl.style.top=scale*(oDiv2.offsetHeight-oUl.offsetHeight)+'px';
    };
    addMouseWheel(oDiv2,function(down){
        var l=oBar.offsetTop;
        if (down) {
            l+=10;
        }else{
            l-=10;
        }
        setContentPos(l)
    }); 
};
</script>
</head>
<body>
<div id="div1">
    <div id="div2">
        <ul>
        <li>11111111111111111</li>
        <li>11111111111111111</li>
        <li>11111111111111111</li>
        <li>11111111111111111</li>
        <li>11111111111111111</li>
        <li>11111111111111111</li>
        <li>11111111111111111</li>
        <li>11111111111111111</li>
        <li>11111111111111111</li>
        <li>11111111111111111</li>
        <li>11111111111111111</li>
        <li>11111111111111111</li>
        <li>11111111111111111</li>
        <li>11111111111111111</li>
        <li>11111111111111111</li>
        <li>11111111111111111</li>
        <li>11111111111111111</li>
        <li>11111111111111111</li>
        <li>11111111111111111</li>
        <li>11111111111111111</li>
        <li>11111111111111111</li>
        <li>11111111111111111</li>
        <li>11111111111111111</li>
        <li>11111111111111111</li>
        <li>11111111111111111</li>
        <li>11111111111111111</li>
        <li>11111111111111111</li>
        <li>11111111111111111</li>
        </ul>
    </div>
    <div id="div3">
        <div id="div4"></div>
    </div>
</div>
</body>
</html>

addMouseWheel2.js

function addMouseWheel(obj,fn){
    //1.判断浏览器
    if(navigator.userAgent.toLowerCase().indexOf('firefox') != -1){
        //ff
        obj.addEventListener('DOMMouseScroll', fnWheel,false);
    }else{
        //other
        obj.onmousewheel=fnWheel;
    }
    //2.确定方向
    function fnWheel(ev){
        var oEvt=ev||event;
        if(oEvt.wheelDelta){
            //ie chrome
            var down=oEvt.wheelDelta<0?true:false;
        }else{
            //ff
            var down=oEvt.detail>0?true:false;
        }
        //3.回调传参
        fn(down);
        //4.阻止默认
        oEvt.preventDefault && oEvt.preventDefault();
        return false;
    }
}