自制滚动条 + 调用公共的头部和尾部

1、自制滚动条

首先写好样式，滚动条滑动轨道的高度是固定的，滚动条的高度是根据所有内容的高度与显示部分的高度的百分比来定的。

html部分

<div class="lrc-area">    <!--歌词显示区域-->
    <ul class="lyrics"></ul>    <!--所有歌词-->
    <div id="scroll-bar"></div>   <!--滚动条-->
 </div>

css部分

#lyric .lrc-area{
    width: 100%;
    height: 380px;
    overflow: hidden;  /* 隐藏溢出部分，若设为auto则显示默认的滚动条 */
    position: relative;
}

#lyric .lyrics{
    width: 98%;
    margin: 10px 0;
    position: absolute;
    top: 0;
    left: 0;
    transition: all 0.5s;     /* 设置歌词上移速度 */
    text-align: center;
}

#lyric .lrc-area #scroll-bar{
    width: 5px;
    /*height: 10%;*/
    border-radius: 30px;
    background-color: grey;
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 0;
}

js部分

             var lyrics = document.getElementsByClassName("lyrics")[0];
             var liObj = lyrics.getElementsByTagName("li");
              var lrcArea = document.getElementsByClassName("lrc-area")[0];
              var scrollBar = document.getElementById("scroll-bar");
              
               //滚动条
                scrollBar.style.top = "0";
                lyrics.style.top = "0";
                var scrollBarHeight = (lyrics.offsetHeight - lrcArea.offsetHeight) / lyrics.offsetHeight * 100;   //设置滚动条的高度
                scrollBar.style.height = (100 - scrollBarHeight).toFixed(2) + "%";
                
                //鼠标拖动滚动条
                scrollBar.onmousedown = function (event) {
                    var e = event || window.event;
                    document.onmousemove = function (event) {
                        var e = event || window.event;
                        var theH