我是一個網(wǎng)易云粉，有沒有發(fā)現(xiàn)網(wǎng)易云音樂兩邊的滾動條是互不相干的，而且頭部和底部都是固定的，這是如何實現(xiàn)的呢？先看個圖吧。

網(wǎng)易云音樂的頁面

其實要實現(xiàn)這樣一個內(nèi)聯(lián)滾動條不難。我們可以先從實現(xiàn)一個內(nèi)聯(lián)滾動條開始實現(xiàn)。

實現(xiàn)方法：

• calc的使用

• flex布局

  基本的邏輯思路是：
  先看代碼實現(xiàn)吧。
  基本的HTML代碼塊：

<div class="hq">我是頭部</div>
<div class="c">
<div class="container l">
    <div class="part1">我是內(nèi)容111</div>
    <div class="part1">我是內(nèi)容211</div>
    <div class="part1">我是內(nèi)容311</div>
    <div class="part1">我是內(nèi)容411</div>
    <div class="part1">我是內(nèi)容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的高度要知道，需要提前設置；
• 中間內(nèi)容區(qū)域的高度取決于header footer的高度

原理講解：
首先，calc是CSS 中的一個樣式屬性，用來指定元素的寬度或者高度，100vh是指窗口的高度，100vh就是指整個窗口的高度，之前我們或許會用height:100%來設置高度，但是會有局限，因為body元素也得設置100%才有效。那么100vh則可以很好地解決這個問題；
設置內(nèi)容區(qū)域高度的時候，我們用 height:calc(100vh - 80px);其中80px就是header和footer的總高度之和。
footer只要給設置成fixed定位方式，bottom設置為0 則可以固定在底部了。
這樣一來，中間內(nèi)容區(qū)域的高度就剛好卡在header和footer中間了，只要設置一個overflow：auto就可以實現(xiàn)滾動了。
看一下效果吧。

效果圖

那如果要實現(xiàn)網(wǎng)易云那樣的雙邊滾動效果呢？

想一想，是不是其實不難，我們只要在中間的內(nèi)容區(qū)域再添加一個就可以了，然后兩個部分做一個簡單的布局就可以了?？创a吧。

<div class="hq">我是頭部</div>
<div class="c">
<div class="container side">   //這是側(cè)邊欄
    <div class="part1">我是內(nèi)容111</div>
    <div class="part1">我是內(nèi)容211</div>
    <div class="part1">我是內(nèi)容311</div>
    <div class="part1">我是內(nèi)容411</div>
    <div class="part1">我是內(nèi)容511</div>
</div>
<div class="container main">   //這是主體內(nèi)容
    <div class="part1">我是內(nèi)容111</div>
    <div class="part1">我是內(nèi)容211</div>
    <div class="part1">我是內(nèi)容311</div>
    <div class="part1">我是內(nèi)容411</div>
    <div class="part1">我是內(nèi)容511</div>
</div>
</div>
<div class="footer">我是底部</div>
</body>
</html>

CSS樣式設置：
footer和header還是一樣的，所以這里就不加了。
看一下中間部分，我給側(cè)邊欄和主體用一個div包住，設置flex布局（今天研究了一下發(fā)現(xiàn)這東西好好用。）

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

然后分別給side和main部分設置樣式：

.side {
            flex:1;   //分別設置占據(jù)的大小
            width: 100%;
            height:calc(100vh - 80px);
            overflow: auto;
        }

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

看下結(jié)果吧。

雙邊內(nèi)聯(lián)滾動條

其實關于內(nèi)聯(lián)滾動條的實現(xiàn)還可以用絕對定位以及相對定位的方式來實現(xiàn)，但是我個人覺得有點復雜和麻煩，我后續(xù)有時間可以再補充上來，這個方法我覺得是比較方便的。

除了實現(xiàn)內(nèi)聯(lián)滾動，這個方法也實現(xiàn)了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

呼呼，早點睡了。