CSS滚动

什么时候会产生滚动？当内容比容器多时就会产生滚动。

滚动的行为

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 150px;
            background-color: red;
            height: 200px;
            margin-right: 50px;
        }
        section {
            font-size: 30px;
            width: 200px;
        }
        /* 滚动条隐藏 */
        /* 容器大小不变，内容会跑出去 */
        .c1 {
            overflow: visible;
        }
        /* 滚动条隐藏 */
        .c2 {
            overflow: hidden;
        }
        /* 滚动条显示 */
        /* 就算内容没有超过容器，滚动条依然显示 */
        .c3 {
            overflow: scroll;
        }
        /* 滚动条自动显示 */
        /* 内容没有超过容器时，滚动条不会显示 */
        .c4 {
            overflow: auto;
        }
    </style>
</head>
<body style="display: flex;">
    <div class="c1">
        <section>overflow: visible</section>
        <p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p>
    </div>
    <div class="c2">
        <section>overflow: hidden</section>
        <p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p>
    </div>
    <div class="c3">
        <section>overflow: scroll</section>
        <h1>scroll</h1>
        <p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p>
    </div>
    <div class="c4">
        <section>overflow: auto</section>
        <h1>auto</h1>
        <p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p>
    </div>
    <div class="c3">
        scroll
        <p>段落</p>
    </div>
    <div class="c4">
        auto
        <p>段落</p>
    </div>
</body>
</html>

 

 怎么修改滚动条的默认样式？

posted @ 2020-07-11 23:16  JasonWangTing  阅读(415)  评论(0)  编辑  收藏  举报