用flex布局局部滚动页面-CFANZ编程社区

我的姑娘，我好想你。

示意图

用flex布局局部滚动页面_前端

示意图如上图，贴合名片的那个页面了，用这个案例来演示下。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="page">
        <div class="head">

        </div>
        <div class="container">
            <div class="left-scroll">
                <div class="text">我是内容，请给我设置文字吧</div>
            </div>
            <div class="right-scroll">
                <div class="text">我是内容，请给我设置文字吧</div>
            </div>
        </div>
    </div>
</body>
</html>

<style lang="scss">
*{
    margin: 0;
    padding: 0;
}
.page{
    height: 100vh;
    /* 页面高度100vh，100vh就是整个屏幕的高度 */
    display: flex;
    flex-direction: column;
    /* 设置为flex布局，并垂直 */
    overflow: hidden;
}
.head{
    height: 100px;
    width: 100%;
    background: #999;
}
.container{
    flex: 1;
    /* flex:1占据剩余空间 */
    display: flex;
    /* 设置为flex */
    overflow: hidden;
}
.container .left-scroll{
    width: 100px;
    height: 100%;
    background: red;
    overflow-y: auto;
}
.container .right-scroll{
    flex: 1;
    height: 100%;
    background: blue;
    overflow-y: auto;
}

.text{
    height: 3000px;
}
</style>

布局效果如下：

用flex布局局部滚动页面_前端_02

注意

除了滚动区域外，滚动区域的上级元素都要overflow:hidden，否则就会判定为上级元素会滚动。

原因见下方。

滚动形成的要素

用flex布局局部滚动页面_前端_03

当元素高度，达到以上条件，才会形成滚动区域。

即蓝色滚动区域高度固定，设置overflow:auto或者scroll，红色的是内容，要超过滚动区域的高度。