自制的滚动条

<div class="container">
    <div class="content">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
            <li>11</li>
            <li>12</li>
            <li>13</li>
            <li>14</li>
            <li>15</li>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
            <li>11</li>
            <li>12</li>
            <li>13</li>
            <li>14</li>
            <li>15</li>
        </ul>

    </div>
    <ul class="scroll">
        <li class="up">
            <span id="upBar" class="uptriangle"></span>
        </li>
        <li class="duration">
            <div class="bar"></div>
        </li>
        <li class="down">
            <span id="downBar" class="downtriangle"></span>
        </li>
    </ul>
</div>
* {
    margin: 0;
    padding: 0;
    list-style: none;
}

body {
    overflow: hidden;
}

.container {
    position: relative;
    width: 380px;
    height: 400px;
    margin: 100px auto;
    border: 1px solid red;
    overflow: hidden;
}

.container .content {
    position: absolute;
    left: 0;
    top: 0;
    width: 350px;
}

.container .scroll {
    position: absolute;
    right: 0;
    top: 0;
    width: 28px;
    height: 398px;
    border: 1px solid #000;
}

.container .scroll li {
    width: 100%;
}

.container .scroll li.up {
    height: 28px;
    font-size: 16px;
}

.container .scroll li.down {
    height: 28px;
    font-size: 16px;
}

.container .scroll li.duration {
    position: relative;
    height: 342px;
    width: 100%;
}

.container .scroll li.duration .bar {
    position: absolute;
    left: 0;
    top: 0;
    background: red;
    width: 100%;
    /* height: 28px; */
}

.uptriangle {
    display: inline-block;
    width: 0;
    height: 0;
    border-right: 15px solid transparent;
    border-left: 15px solid transparent;
    border-bottom: 15px solid red;
}

.downtriangle {
    display: inline-block;
    width: 0;
    height: 0;
    border-right: 15px solid transparent;
    border-left: 15px solid transparent;
    border-top: 15px solid red;
}

// 简单的一个自制滚动条
function Scroll(options) {
    this.el_scroll = document.getElementsByClassName(options.scroll)[0] || document.getElementById(options.scroll);
    this.el_container = document.getElementsByClassName(options.container)[0] || document.getElementById(options.container);
    this.el_content = document.getElementsByClassName(options.content)[0] || document.getElementById(options.content);
    this.el_duration = document.getElementsByClassName(options.duration)[0] || document.getElementById(options.duration);
    this.el_bar = document.getElementsByClassName(options.bar)[0] || document.getElementById(options.bar);
    var parcentHeight = Math.floor((this.el_container.offsetHeight / this.el_content.offsetHeight) * this.el_duration.offsetHeight) // 计算滚动条长度
    this.el_bar.style.height = parcentHeight + 'px'
    this.init(options.speed)
}
Scroll.prototype = {
    constructor: Scroll,
    init: function(speed) {
        this.scrollDarge() // 拖拽滚动条
        this.scrollClick(speed) // 点击上下箭头
        this.scrollWhell(speed) // 鼠标滑轮滚动
    },
    scrollDarge: function() {
        var that = this;
        that.el_bar.onmousedown = function(e) {
        	e = e || window.event
            var e_y = e.pageY
            e.preventDefault();
            document.onmousemove = function(e) {
                var chay = e.pageY - e_y;
                that.el_bar.style.top = that.el_bar.offsetTop + chay + 'px';
                e_y = e.pageY
                if (that.el_bar.offsetTop < 0) { // 是否超出上边的范围
                    that.el_bar.style.top = 0 + 'px'
                } else if (that.el_bar.offsetTop + that.el_bar.offsetHeight > that.el_duration.offsetHeight) { // 滚动到最底部
                    that.el_bar.style.top = that.el_duration.offsetHeight - that.el_bar.offsetHeight + 'px'
                }
                that.contentMove(that.el_bar);
            }
            document.onmouseup = function() {
                document.onmousemove = null
            }
        }
    },
    contentMove: function() { // 文档跟随滚动
        var that = this;
        var percentHeight = that.el_bar.offsetTop / (that.el_duration.offsetHeight - that.el_bar.offsetHeight) // 计算滚动条滚动位子
        var moveHeight = Math.floor(percentHeight * (that.el_content.offsetHeight - that.el_container.offsetHeight)) // 计算超出盒子的文档
        that.el_content.style.top = -moveHeight + 'px'; //让内容跟谁滚动条滚动
    },
    scrollClick: function(speed) { // 上下箭头点击
        var that = this;
        var el_scroll = that.el_scroll
        var speed = parseInt(speed)
        el_scroll.onclick = function(e) {
        	e = e || window.event
            if (e.target.id == 'upBar') { // 
                that.el_bar.style.top = that.el_bar.offsetTop - speed + 'px'
                if (that.el_bar.offsetTop < 0) {
                    that.el_bar.style.top = 0 + 'px'
                }
            } else if (e.target.id == 'downBar') {
                that.el_bar.style.top = that.el_bar.offsetTop + speed + 'px'
                if (that.el_bar.offsetTop + that.el_bar.offsetHeight > that.el_duration.offsetHeight) {
                    that.el_bar.style.top = that.el_duration.offsetHeight - that.el_bar.offsetHeight + 'px'
                }
            }
            that.contentMove(that.el_bar);
        }
    },
    scrollWhell: function(speed) { // 鼠标滑轮滑动
        var that = this;
        var speed = parseInt(speed);
        that.el_container.onmousewheel = function(e) {
        	e = e || window.event
            if (e.wheelDelta > 0) { // 上
                that.el_bar.style.top = that.el_bar.offsetTop - speed + 'px'
                if (that.el_bar.offsetTop < 0) {
                    that.el_bar.style.top = 0 + 'px'
                }
            } else { //  下
                that.el_bar.style.top = that.el_bar.offsetTop + speed + 'px'
                if (that.el_bar.offsetTop + that.el_bar.offsetHeight > that.el_duration.offsetHeight) {
                    that.el_bar.style.top = that.el_duration.offsetHeight - that.el_bar.offsetHeight + 'px'
                }
            }
            that.contentMove(that.el_bar);
        }
    }
}
// 调用
 new Scroll({
 	 scroll: 'scroll',
     container: 'container',
     content: 'content',
     duration: 'duration',
     bar: 'bar',
     speed: 60
 })

不喜勿喷，只是学习的时候写下来的，欢迎大家留言 样式难看了一些 需要可做修改