自定义滑动条（纵向）

发现网上大多数的教学都是横线，这里展示纵向用法，完全属于自定义，别的使用系统自带的input range方法差不多，参考领悟一下即可。

   function Mobile() {
        // 拖拉物定义
        var body = document.getElementsByTagName("body")[0];
        //自定义range
        var ball = document.getElementById("ball")//移动物
        var range = document.getElementById("range")//底层进度条
        var rangeTop = document.getElementById("rangeTop")//上层进度条
        ball.style.top = range.offsetHeight + "px";//置底
        var topCha, lenth;
        //定义鼠标是否按下的标识
        var isDown = false;
        /**
         * 鼠标按下
         * */
        ball.onmousedown = function (e) {
            var e = e || window.event;
            topCha = e.clientY - ball.offsetTop;//顶部距离topCha
//            alert("数值"+my);
            isDown = true;
        }
        /**
         * 鼠标移动
         * */
        window.onmousemove = function (event) {
            var event = event || window.event;
            ball.onmouseout = function () {
                isDown = false;

            }
            if (!isDown) {
                return;  //终止程序执行
            }
            if (ball.offsetTop > 446 ) {//下端到底部
                ball.style.top = 445 + "px";
                isDown = false;
                return;
            }
            else if (ball.offsetTop < 0)
            {
                ball.style.top = 1 + "px";
                isDown = false;
                return;
            }
            else if (isDown) {
                    ball.style.top = event.clientY - topCha + 'px';//常规位置
                }
            }
        /**
         * 鼠标弹起
         * */
        window.onmouseup = function () {
            isDown = false;
            return;
        }
    }