如何优雅的实现内联滚动条（前端底部固定方法 ）

我是一个网易云粉，有没有发现网易云音乐两边的滚动条是互不相干的，而且头部和底部都是固定的，这是如何实现的呢？先看个图吧。

网易云音乐的页面

其实要实现这样一个内联滚动条不难。我们可以先从实现一个内联滚动条开始实现。

实现方法：

• calc的使用

• flex布局

  基本的逻辑思路是：
  先看代码实现吧。
  基本的HTML代码块：

<div class="hq">我是头部</div>
<div class="c">
<div class="container l">
    <div class="part1">我是内容111</div>
    <div class="part1">我是内容211</div>
    <div class="part1">我是内容311</div>
    <div class="part1">我是内容411</div>
    <div class="part1">我是内容511</div>
</div>
</div>
<div class="footer">我是底部</div>

CSS样式设置：

header的样式设置：

.hq {
            width:100%;
            height:40px;
            background: peru;
        }

footer的样式设置

  .footer {
            position: fixed;
            bottom: 0px;
            width:100%;
            height:40px;
            background: palevioletred;
        }

container的样式设置：

 .container {
            width: 100%;
            height:calc(100vh - 80px);
            overflow: auto;
        }

使用要求：

• header 和 footer的高度要知道，需要提前设置；
• 中间内容区域的高度取决于header footer的高度

原理讲解：
首先，calc是CSS 中的一个样式属性，用来指定元素的宽度或者高度，100vh是指窗口的高度，100vh就是指整个窗口的高度，之前我们或许会用height:100%来设置高度，但是会有局限，因为body元素也得设置100%才有效。那么100vh则可以很好地解决这个问题；
设置内容区域高度的时候，我们用 height:calc(100vh - 80px);其中80px就是header和footer的总高度之和。
footer只要给设置成fixed定位方式，bottom设置为0 则可以固定在底部了。
这样一来，中间内容区域的高度就刚好卡在header和footer中间了，只要设置一个overflow：auto就可以实现滚动了。
看一下效果吧。

效果图

那如果要实现网易云那样的双边滚动效果呢？

想一想，是不是其实不难，我们只要在中间的内容区域再添加一个就可以了，然后两个部分做一个简单的布局就可以了。看代码吧。

<div class="hq">我是头部</div>
<div class="c">
<div class="container side">   //这是侧边栏
    <div class="part1">我是内容111</div>
    <div class="part1">我是内容211</div>
    <div class="part1">我是内容311</div>
    <div class="part1">我是内容411</div>
    <div class="part1">我是内容511</div>
</div>
<div class="container main">   //这是主体内容
    <div class="part1">我是内容111</div>
    <div class="part1">我是内容211</div>
    <div class="part1">我是内容311</div>
    <div class="part1">我是内容411</div>
    <div class="part1">我是内容511</div>
</div>
</div>
<div class="footer">我是底部</div>
</body>
</html>

CSS样式设置：
footer和header还是一样的，所以这里就不加了。
看一下中间部分，我给侧边栏和主体用一个div包住，设置flex布局（今天研究了一下发现这东西好好用。）

 .c {
         display: flex;   //flex布局
     }

然后分别给side和main部分设置样式：

.side {
            flex:1;   //分别设置占据的大小
            width: 100%;
            height:calc(100vh - 80px);
            overflow: auto;
        }

.main {
            flex:3;
            width: 100%;
            height:calc(100vh - 80px);  //还是跟之前一样
            overflow: auto;
        }

看下结果吧。

双边内联滚动条

其实关于内联滚动条的实现还可以用绝对定位以及相对定位的方式来实现，但是我个人觉得有点复杂和麻烦，我后续有时间可以再补充上来，这个方法我觉得是比较方便的。

除了实现内联滚动，这个方法也实现了footer固定，不过footer固定的方法有很多，这里就不加说了。还有一个叫sticky footer的，也可以了解。

参考链接：

• cal的使用：
  https://developer.mozilla.org/en-US/docs/Web/CSS/calc

• flex布局
  http://zh.learnlayout.com/flexbox.html

• vh的概念
  https://www.w3cplus.com/css/simplify-your-stylesheets-with-the-magical-css-viewport-units.html

呼呼，早点睡了。