RockShang

# 7、css实现滚动条

效果展示：

// html 代码

<body>
     <h1>哈哈</h1>
    <h2>天天向你是 v    </h2>、 
    <h1>哈哈</h1>
    <h2>天天向你是 v    </h2>
    <h1>哈哈</h1>
    <h2>天天向你是 v    </h2>
    <h1>哈哈</h1>
    <h2>天天向你是 v    </h2>
    <h1>哈哈</h1>
    <h2>天天向你是 v    </h2>
    <h1>哈哈</h1>
    <h2>天天向你是 v    </h2>
    <h1>哈哈</h1>
    <h2>天天向你是 v    </h2>
    <h1>哈哈</h1>
    <h2>天天向你是 v    </h2>
    <h1>哈哈</h1>
    <h2>天天向你是 v    </h2>
 </body>

// css 代码

  body{
        position: relative;
        z-index: 1;
        background-image: linear-gradient(to right top,#ff00ff 50%, #eee 50%);
        background-size: 100% calc(100% - 100vh + 5px);
        background-repeat: no-repeat;
    }
    body::after{
        content:'';
        position: fixed;
        top: 5px;
        left: 0;
        bottom: 0;
        right: 0;
        background-color: #fff;
        z-index: -1;
    }

← Js-Gulid →