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

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 theHeight = e.clientY - lrcArea.offsetTop - lrcArea.offsetTop;
                        var theTop = scrollBar.offsetTop / (lrcArea.offsetHeight - scrollBar.offsetHeight) * (lyrics.offsetHeight - lrcArea.offsetHeight);
                        if (theHeight < 0) {
                            theHeight = 0;
                        } else if (theHeight > lrcArea.offsetHeight - scrollBar.offsetHeight) {
                            theHeight = lrcArea.offsetHeight - scrollBar.offsetHeight;
                        }
                        scrollBar.style.top = theHeight + "px";
                        lyrics.style.transition = "none";
                        scrollBar.style.transition = "none";
                        lyrics.style.top = -theTop + "px";
                    }
                };
                
                //鼠标弹起时不做任何动作
                scrollBar.onmouseup = function () {
                    scrollBar.onmousemove = null;
                };
                
                //滚轮滚动方法
                function scrollFunc(e) {
                    e = e || window.event;
                    var percentHBar = (lrcArea.offsetHeight - scrollBar.offsetHeight) * 0.05;
                    if (e.wheelDelta) {  //判断浏览器IE，谷歌滑轮事件
                        if (e.wheelDelta > 0) { //当滑轮向上滚动时
                            if (scrollBar.offsetTop >= percentHBar) {
                                lyrics.style.transition = "all 0.1s";
                                scrollBar.style.transition = "all 0.1s";
                                scrollBar.style.top = scrollBar.offsetTop - percentHBar + "px";
                                lyrics.style.top = -scrollBar.offsetTop / (lrcArea.offsetHeight - scrollBar.offsetHeight) * (lyrics.offsetHeight - lrcArea.offsetHeight)+"px";
                            }else{
                                lyrics.style.top = "0";
                            }
                        }
                        if (e.wheelDelta < 0) { //当滑轮向下滚动时
                            if (scrollBar.offsetTop <= lrcArea.offsetHeight - scrollBar.offsetHeight-percentHBar) {
                                lyrics.style.transition = "all 0.1s";
                                scrollBar.style.transition = "all 0.1s";
                                scrollBar.style.top = scrollBar.offsetTop + percentHBar + "px";
                                lyrics.style.top = -scrollBar.offsetTop / (lrcArea.offsetHeight - scrollBar.offsetHeight) * (lyrics.offsetHeight - lrcArea.offsetHeight)+"px";
                            }else{
                                lyrics.style.top = -(lyrics.offsetHeight - lrcArea.offsetHeight)+"px";
                            }
                        }
                    } else if (e.detail) {  //Firefox滑轮事件
                        if (e.detail < 0) { //当滑轮向下滚动时
                            if (scrollBar.offsetTop >= percentHBar) {
                                lyrics.style.transition = "all 0.1s";
                                scrollBar.style.transition = "all 0.1s";
                                scrollBar.style.top = scrollBar.offsetTop - percentHBar + "px";
                                lyrics.style.top = -scrollBar.offsetTop / (lrcArea.offsetHeight - scrollBar.offsetHeight) * (lyrics.offsetHeight - lrcArea.offsetHeight)+"px";
                            }else{
                                lyrics.style.top = "0";
                            }
                        }
                        if (e.detail > 0) { //当滑轮向上滚动时
                            if (scrollBar.offsetTop <= lrcArea.offsetHeight - scrollBar.offsetHeight-percentHBar) {
                                lyrics.style.transition = "all 0.1s";
                                scrollBar.style.transition = "all 0.1s";
                                scrollBar.style.top = scrollBar.offsetTop + percentHBar + "px";
                                lyrics.style.top = -scrollBar.offsetTop / (lrcArea.offsetHeight - scrollBar.offsetHeight) * (lyrics.offsetHeight - lrcArea.offsetHeight)+"px";
                            }else{
                                lyrics.style.top = -(lyrics.offsetHeight - lrcArea.offsetHeight)+"px";
                            }
                        }
                    }
                }

                //firefox调用滚动方法
                if (lrcArea.addEventListener) {
                    lrcArea.addEventListener('DOMMouseScroll', scrollFunc, false);
                }
                //Safari,Chrome,IE调用滚动方法
                lrcArea.onmousewheel = scrollFunc;
            } 
        });

2、调用公共的头部和尾部

• 使用iframe标签
  将头部或尾部的内容放在单独的html文件中，在需要使用到头部或尾部的地方用iframe标签调用相应的html文件。
  这种方法需要调整iframe的大小以及自适应屏幕，比较麻烦。

<iframe src="../html/HomePage.html" frameborder="0"
        scrolling="auto"
        id="container"
></iframe>

• 使用load()方法引入
  将头部或尾部写在单独的html文件中（不需要完整的html结构，只需要写在头部或尾部里的内容即可）

<!-- 头部的内容，header.html -->
<div class="search-box">
    <input type="text" class="search" placeholder="宠物店/热门视频...">
    <img src="../img/search.png" alt="" class="search-btn">
</div>
<div class="user-head-picture">
    <img src="../img/camera.png" alt="">
</div>

<!-- 尾部的内容，footer.html -->
<ul>
    <li id="main-page1">
        <a href="page-1.html">
            <p><img src="../img/page1-icon.png" alt="" class="page-icon"></p>
            <p class="page-name">宠聊</p>
        </a>
    </li>
    <li id="main-page2">
        <a href="page-2.html">
            <p><img src="../img/page2-icon.png" alt="" class="page-icon"></p>
            <p class="page-name">社区</p>
        </a>
    </li>
    <li id="main-page3">
        <a href="HomePage.html">
            <img src="../img/page3-icon.png" alt="" class="page-icon main-page-icon">
        </a>
    </li>
    <li id="main-page4">
        <a href="page-4.html">
            <p><img src="../img/page4-icon.png" alt="" class="page-icon"></p>
            <p class="page-name">发现</p>
        </a>
    </li>
    <li id="main-page5">
        <a href="page-5.html">
            <p><img src="../img/page5-icon.png" alt="" class="page-icon"></p>
            <p class="page-name">我的</p>
        </a>
    </li>
</ul>

在需要加入头部或尾部的地方写上header或footer等存放头部或尾部的容器标签

<body>
    <header></header>
    
	<footer></footer>
</body>

引入jquery后在用load()方法将头部或尾部的代码引入到相应的容器中

<script src="../../../JS/jquery-3.3.1.min.js"></script>
<script>
    //引入头部
    $(function () {
        $("header").load("header.html");
    });
    
   //引入底部菜单导航
    $(function () {
        $("footer").load("footer.html", function () {
            //设置当前页面图标颜色(改变图片)
            $("#main-page3 img").attr("src", "../img/page3-icon-1.png");
        });
    });
</script>

头部和尾部的样式可以写在单独的css文件中，在引入头尾部的html中调用。