CSS 在div最外层添加向下的滚动条，在内层嵌套向左的滚动条

最新推荐文章于 2023-06-12 16:16:31 发布

爱唱歌的前端

最新推荐文章于 2023-06-12 16:16:31 发布

阅读量3.7k

点赞数

分类专栏：大前端文章标签： CSS 在div最外层添加向下的滚动条，在内层嵌套向左的滚动条 css overflow

本文链接：https://blog.csdn.net/weixin_42063951/article/details/96317809

版权

大前端专栏收录该内容

13 篇文章 2 订阅

订阅专栏

为了一目了然我录制了个GIF如下：
在这里插入图片描述

可以看到图片中我们视图分为3块，分别是头部、左部和右部。
在这里插入图片描述

可以看到图片中，不管我们点击左边块下拉还是右边块下拉方块都不会有切割的现象，因为我给了一样的高度和内边距。
在这里插入图片描述

可以看到图片中，我们向右滑动右边蓝色块，左边的绿色区域是没有被遮住的。我在底部留了很大的padding是因为在开发中底部通常都会有模块的（底部栏），在一些短的设备（iPhone5）中数据会被遮住，还有就是下面有底部栏的话记得加个背景色，不然滚动条遮盖不了。
在这里插入图片描述

代码部分：（注意：css属性中一定要把html这个全局属性的溢出滚动（overflow）关了，默认是开了的，不改成hidden的话你会发现连头部都一起摇摆了。）

<!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>
<style>
    html {
        overflow: hidden;
    }
    
    body {
        margin: 0;
        color: white;
    }
    
    .top {
        max-width: 800px;
        background: #f00;
    }
    
    .content {
        height: 200px;
        border-style: solid;
        border-width: 2px;
        border-color: black;
    }
    
    .mid {
        overflow-y: auto;
        height: 800px;
    }
    
    .mid-child {
        display: flex;
        justify-content: flex-start;
    }
    
    .mid-child-left {
        width: 200px;
        background: #0f0;
    }
    
    .mid-child-right {
        overflow-y: hidden;
        overflow-x: auto;
        width: 600px;
        background: #00f;
        padding-bottom: 250px;
    }
    
    .mid-child-right-div {
        width: 600px;
        padding-right: 100px;
    }
</style>

<body>
    <div class="hello">
        <div class="top">1111111111111我是大哥我不动111111111111</div>
        <div class="mid">
            <div class="mid-child">
                <div class="mid-child-left">
                    <div class="content">1</div>
                    <div class="content">2</div>
                    <div class="content">3</div>
                    <div class="content">4</div>
                    <div class="content">5<br>到<br>底<br>啦<br>！</div>
                </div>
                <div class="mid-child-right">
                    <div class="mid-child-right-div">
                        <div class="content">111111111111111</div>
                        <div class="content">222222222222222222222222222</div>
                        <div class="content">33333333333333333333333333333333333333333</div>
                        <div class="content">4444444444444444444444444444444444444444444444444</div>
                        <div class="content">5555555555555555555555555555555555555555555555555555到底啦！</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>