滚动事件 滚动条

代码如下：

css代码：
<style type="text/css">
        h1{
            margin: 0;
            width: 193px;
            height: 46px;
            background: url(img/logo.png);
            position: absolute;
            top:60px;
            left: 297px;
        }
        body{
            margin: 0;
        }
        ul{
            padding: 0;
            margin: 0;
            list-style: none;
            position: absolute;
            top: 0;
            left: 0;
        }
        #wrap{
            position: relative;
            width: 712px;
            height: 435px;
            padding-top: 165px;
            padding-left: 88px;
            background: url("img/bg.png") 0 0 no-repeat;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        #wrap .scrollWrap{
            position: relative;
        }
        li{
            font: 14px/36px "宋体";
            text-indent: 20px;
        }
        #listWrap {
            width: 101px;
            height: 387px;
            border-radius: 10px;
            background: rgba(0,0,0,.6);
            color: #fff;    
            margin-right: 72px;
            overflow: hidden;
            position: relative;
        }
        #listWrap .scrollWrap{
            position: absolute;
            top: 11px;
            right: 7px;
            width:15px;
            height: 365px;
            /*background: rgba(0,0,0,.8);*/
            background: #fff;
            border-radius: 5px;
        }
        #listWrap .scrollBar {
            width: 13px;
            height: 90px;
            position: absolute;
            top: 0px;
            left: 1px;
            background: url(img/s2.png) no-repeat;
        }
    </style>

html代码：

<section id="wrap">
        <h1></h1>
        <div id="listWrap">
            <ul id="listItems">
                <li>北京</li>
                <li>上海</li>
                <li>广州</li>
                <li>深圳</li>
                <li>重庆</li>
                <li>成都</li>
                <li>武汉</li>
                <li>哈尔滨</li>
                <li>沈阳</li>
                <li>长春</li>
                <li>大连</li>
                <li>石家庄</li>
                <li>西安</li>
                <li>贵阳</li>
                <li>天津</li>
                <li>厦门</li>
            </ul>
            <div class="scrollWrap">
                <div class="scrollBar"></div>
            </div>
        </div>
    </section>


js代码：
    <script>
    /*思路：
        *
        * 1. 获取    内容的高度以及现实的高度和滚动条容器的高度 求出滚动条的高度（如果滚动条是固定高 就求出每次滚动的距离）
        * 2.添加拖拽事件以及鼠标滚轮事件
        * 3.算出滚动的比例  设定滚动以及拖拽的最大范围
        * 4.运动比例相同，将两者进行关联
        *
    */




    //获取地点显示的容器
    var listWrap = document.getElementById('listWrap');
    //地点的父级ul
    var listItems = document.getElementById('listItems');
    //滚动条的容器
    var scrollWrap = document.querySelector('.scrollWrap');
    //滚动条
    var scrollBar = document.querySelector('.scrollBar');
    //储存两个容器的高不包括边框        获取ul和滚动条自身的高度包括边框
    var listWrapHeight = listWrap.clientHeight;
    var listItemsHeight = listItems.offsetHeight;
    var scrollWrapHeight = scrollWrap.clientHeight;
    var scrollBarHeight = scrollBar.offsetHeight;
    //所能移动的最大top值
    var maxListTop = listItemsHeight - listWrapHeight;
    var maxScrollTop = scrollWrapHeight - scrollBarHeight;
    //滚动条除以滚动条容器的高等于 容器除以ul的高        获取进度条的高
    var scrollSize = listWrapHeight / listItemsHeight * scrollWrapHeight;// 每次滚动的距离
    //拖拽函数
    dragEle({
        downEle: scrollBar,        //按下滚动条
        disableX: true,            //禁止横向拖拽
        moveScrop: document,    //鼠标移动事件触发对象
        moveFn(){    //拖拽进行的函数
            var scale = this.offsetTop / maxScrollTop;        //算出比例
            listItems.style.top = -scale*maxListTop + 'px';
        }
    });
    //鼠标滚轮事件
    mouseWheel(listWrap, scrollUp, scrollDown)
    //向上滚
    function scrollUp(){
        var t = Math.max(0, scrollBar.offsetTop - scrollSize);    //每次滚动的距离
        var scale = scrollBar.offsetTop / maxScrollTop;
        scrollBar.style.top = t + 'px';
        listItems.style.top = -scale*maxListTop + 'px';
    }
    //向下滚
    function scrollDown(){
        var t = Math.min(scrollBar.offsetTop + scrollSize, maxScrollTop);//每次滚动的距离
        var scale = scrollBar.offsetTop / maxScrollTop;
        scrollBar.style.top = t + 'px';
        listItems.style.top = -scale*maxListTop + 'px';
    }

</script>