JS 事件基础创建滚动条

最新推荐文章于 2024-09-21 11:29:05 发布

Lewandowski-y

最新推荐文章于 2024-09-21 11:29:05 发布

阅读量300

点赞数

分类专栏： JavaScript学习笔记文章标签： javascript

JavaScript学习笔记专栏收录该内容

13 篇文章 0 订阅

订阅专栏

利用拖拽的方法创建一个滚动条
这里写图片描述

    <style>
    #iparent{
        width: 800px;
        height: 20px;
        background-color: gray;
        position: relative;
        margin: 10px auto;
    }
    #div1{
        width: 20px;
        height: 20px;
        background-color: darkorange;
        position: absolute;
    }
    </style>
    <script>
    window.onload=function()
    {
    var oDiv=document.getElementById('div1');
    var oDiv2=document.getElementById('iparent');
    var disX=0;
    var disY=0;

    //封装一个函数用于获取鼠标坐标
        function getPos(ev)
        {
           var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
           var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;  

           return {x: ev.clientX+scrollLeft, y: ev.clientY+scrollTop};     
        }

        oDiv.onmousedown=function(ev)
        {
           var oEvent=ev||event;
           var pos=getPos(oEvent);  //这样就可以获取鼠标坐标，比如pos.x表示鼠标横坐标

           disX=pos.x-oDiv.offsetLeft;
           disY=pos.y-oDiv.offsetTop;

           document.onmousemove=function(ev)  
           /*由于要防止鼠标滑动太快跑出div，这里应该用document.
           因为触发onmousemove时要重新获取鼠标的坐标，不能使用父函数上的pos.x和pos.y，所以必须写var oEvent=ev||event;var pos=getPos(oEvent);*/
           {
             var oEvent=ev||event;
             var pos=getPos(oEvent);

             //防止div跑出可视框
             var l=pos.x-disX;
             var t=pos.y-disY;
             if(l<0)
             {
              l=0;
             }
             else if(l>oDiv2.offsetWidth-oDiv.offsetWidth)
             {
              l=oDiv2.offsetWidth-oDiv.offsetWidth;
             }

             if(t<0)
             {
              t=0;
             }
             else if(t>oDiv2.offsetHeight-oDiv.offsetHeight)
             {
              t=oDiv2.offsetHeight-oDiv.offsetHeight;
             }

             oDiv.style.left=l+'px';
             oDiv.style.top=t+'px';
           }

           document.onmouseup=function(ev)
           {
              document.onmousemove=null; //将move清除
              document.onmouseup=null;
           }

           return false;  //火狐的bug，要阻止默认事件
        }
    }
    </script>
</head>
<body>
    <div id="iparent">
        <div id="div1"></div>
    </div>
</body>
</html>