css滚动捕捉实现滚动控制效果

代码语言:html

所属分类:加载滚动

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>

    <style>
        .container2 {
            display: grid;
            grid-template-columns: 100% 100% 100%;
            scroll-snap-type: both mandatory;
            overflow: scroll;

            border: 2px solid var(--gs0);
            border-radius: 8px;
            height: 33vh;
        }


        .container2 div {
            scroll-snap-align: start;

            height: 33vh;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 4rem;
        }
        .container2 div:nth-child(1) {
            background: hotpink;
            color: white;
        }
        .container2 div:nth-child(2) {
            background: azure;
        }
        .container2 div:nth-child(3) {
     .........完整代码请登录后点击上方下载按钮下载查看

网友评论0