自定义滚动条

这个和拖拽元素的原理一样，只是把拖拽范围限制在一个制定的父级内，就变成了滚动条。然后再获取出滑动系数，就可以通过滚动条控制其它元素的变化了.

例子：

HTML代码：

<label for="">横滚动条:<input type="text" id="text1" /></label><label for="">竖滚动条:<input type="text" id="text2" /></label>    <div id="div1">        <div id="div2"></div>    </div>    <div id="div3">        <div id="div4"></div>    </div>

CSS代码:

*{margin:0;padding:0;}        #div1{width:500px;height: 30px;position: relative;margin:10px auto;background: #eeeeee;}        #div2{width:30px;height: 30px;position: absolute;left: 0;top:0;background: red;}        #div2:hover{background: orangered;}        #div3{width:30px;height: 500px;position: relative;left:290px;top:-39px;background: #eeeeee;}        #div4{width:30px;height: 30px;position: absolute;left: 0;top:0;background: red;}        #div4:hover{background: orangered;}

JS代码:

window.onload = function ()        {            var oDiv1 = document.getElementById('div1');            var oDiv2 = document.getElementById('div2');            var oDiv3 = document.getElementById('div3');            var oDiv4 = document.getElementById('div4');            var oText1 = document.getElementById('text1');            var oText2 = document.getElementById('text2');            oDiv2.onmousedown = function (ev)            {                scroll(this,oDiv1,ev, function (scale) {                    oText1.value = scale;                });                return false;            };            oDiv4.onmousedown = function (ev)            {                scroll(this,oDiv3,ev, function (scale) {                    oText2.value = scale;                });                return false;            }        };        //滚动条函数,最后一个fun函数是为了获取滚动条的滑动系数        function scroll(objSlid,objParent,ev,fun)//这个ev是obj的鼠标事件        {            var pos = getPos(ev);            var disX = pos.x - objSlid.offsetLeft;            var disY = pos.y - objSlid.offsetTop;            document.onmousemove = function (ev) //这个ev是document的鼠标事件            {                var pos = getPos(ev);   //获取鼠标位置                var l = pos.x - disX;   //(l,t)是元素左上角的坐标                var t = pos.y - disY;                //不让元素移出父级                if(l<0)                    l = 0;                else if(l > objParent.offsetWidth - objSlid.offsetWidth)                    l = objParent.offsetWidth - objSlid.offsetWidth;                if(t<0)                    t = 0;                else if(t > objParent.offsetHeight - objSlid.offsetHeight)                    t = objParent.offsetHeight - objSlid.offsetHeight;                //移动元素                objSlid.style.left = l + 'px';                objSlid.style.top = t + 'px';                var  scale = 0;                if(objSlid.offsetHeight == objParent.offsetHeight)  //横滚动条                    scale = (1/(objParent.offsetWidth - objSlid.offsetWidth))*l;                else                                                //竖滚动条                    scale = (1/(objParent.offsetHeight - objSlid.offsetHeight))*t;                if(fun) fun(scale);  //把滑动系数传进去            };            document.onmouseup = function ()            {                document.onmousemove = null;   //停止移动                document.onmouseup = null;     //不需要的函数赋值为null                if(objSlid.releaseCapture)    //解锁                    objSlid.releaseCapture();            };            if(objSlid.setCapture)     //让所有的事件响应都锁定到obj上                objSlid.setCapture();        }        //获取位置        function getPos(ev)        {            var oEvent = ev||event;  //兼容事件            //如果有滑动条的话，要加上滑了的位置,因为oEvent.clientX是可视区的坐标.            var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;            var scrollLeft = document.documentElement.scrollLeft||document.body.scrollLeft;            return {x:oEvent.clientX + scrollLeft,y:oEvent.clientY + scrollTop};//返回一个JSON数组        }