我是一個(gè)網(wǎng)易云粉，有沒(méi)有發(fā)現(xiàn)網(wǎng)易云音樂(lè)兩邊的滾動(dòng)條是互不相干的迅涮，而且頭部和底部都是固定的废赞，這是如何實(shí)現(xiàn)的呢？先看個(gè)圖吧逗柴。
其實(shí)要實(shí)現(xiàn)這樣一個(gè)內(nèi)聯(lián)滾動(dòng)條不難蛹头。我們可以先從實(shí)現(xiàn)一個(gè)內(nèi)聯(lián)滾動(dòng)條開(kāi)始實(shí)現(xiàn)。
實(shí)現(xiàn)方法：
calc的使用
-
flex布局
基本的邏輯思路是：
先看代碼實(shí)現(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樣式設(shè)置：
header的樣式設(shè)置：
.hq {
width:100%;
height:40px;
background: peru;
}
footer的樣式設(shè)置
.footer {
position: fixed;
bottom: 0px;
width:100%;
height:40px;
background: palevioletred;
}
container的樣式設(shè)置：
.container {
width: 100%;
height:calc(100vh - 80px);
overflow: auto;
}
使用要求：
- header 和 footer的高度要知道渣蜗，需要提前設(shè)置；
- 中間內(nèi)容區(qū)域的高度取決于header footer的高度
原理講解：
首先旷祸，calc是CSS 中的一個(gè)樣式屬性耕拷，用來(lái)指定元素的寬度或者高度，100vh是指窗口的高度托享，100vh就是指整個(gè)窗口的高度骚烧，之前我們或許會(huì)用height:100%來(lái)設(shè)置高度，但是會(huì)有局限闰围，因?yàn)閎ody元素也得設(shè)置100%才有效赃绊。那么100vh則可以很好地解決這個(gè)問(wèn)題；
設(shè)置內(nèi)容區(qū)域高度的時(shí)候羡榴，我們用 height:calc(100vh - 80px);其中80px就是header和footer的總高度之和碧查。
footer只要給設(shè)置成fixed定位方式，bottom設(shè)置為0 則可以固定在底部了校仑。
這樣一來(lái)忠售，中間內(nèi)容區(qū)域的高度就剛好卡在header和footer中間了，只要設(shè)置一個(gè)overflow：auto就可以實(shí)現(xiàn)滾動(dòng)了迄沫。
看一下效果吧稻扬。
那如果要實(shí)現(xiàn)網(wǎng)易云那樣的雙邊滾動(dòng)效果呢？
想一想羊瘩，是不是其實(shí)不難泰佳，我們只要在中間的內(nèi)容區(qū)域再添加一個(gè)就可以了盼砍，然后兩個(gè)部分做一個(gè)簡(jiǎn)單的布局就可以了±种剑看代碼吧衬廷。
<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樣式設(shè)置：
footer和header還是一樣的，所以這里就不加了汽绢。
看一下中間部分吗跋，我給側(cè)邊欄和主體用一個(gè)div包住，設(shè)置flex布局（今天研究了一下發(fā)現(xiàn)這東西好好用宁昭。）
.c {
display: flex; //flex布局
}
然后分別給side和main部分設(shè)置樣式：
.side {
flex:1; //分別設(shè)置占據(jù)的大小
width: 100%;
height:calc(100vh - 80px);
overflow: auto;
}
.main {
flex:3;
width: 100%;
height:calc(100vh - 80px); //還是跟之前一樣
overflow: auto;
}
看下結(jié)果吧跌宛。
其實(shí)關(guān)于內(nèi)聯(lián)滾動(dòng)條的實(shí)現(xiàn)還可以用絕對(duì)定位以及相對(duì)定位的方式來(lái)實(shí)現(xiàn)，但是我個(gè)人覺(jué)得有點(diǎn)復(fù)雜和麻煩积仗，我后續(xù)有時(shí)間可以再補(bǔ)充上來(lái)疆拘，這個(gè)方法我覺(jué)得是比較方便的。
除了實(shí)現(xiàn)內(nèi)聯(lián)滾動(dòng)寂曹，這個(gè)方法也實(shí)現(xiàn)了footer固定哎迄，不過(guò)footer固定的方法有很多，這里就不加說(shuō)了隆圆。還有一個(gè)叫sticky footer的漱挚，也可以了解。
參考鏈接：
cal的使用：
https://developer.mozilla.org/en-US/docs/Web/CSS/calcvh的概念
https://www.w3cplus.com/css/simplify-your-stylesheets-with-the-magical-css-viewport-units.html
呼呼渺氧，早點(diǎn)睡了旨涝。
