首页 > 其他分享> > CSS 实现滑动整个元素

CSS 实现滑动整个元素

2021-09-12 21:03:34 作者：互联网

其实没什么难点，主要就是两个CSS属性

scroll-snap-type 这个是作用在包裹容器身上的.
scroll-snap-align 这个是作用在被包裹容器身上的.

效果如下图所示:

代码如下:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>css scroll-snap</title>
        <style>
            /* setup */
            html,
            body {
                height: 100%;
                margin: 0;
                padding: 0;
            }
            .container {
                display: flex;
                overflow: auto;
                outline: 1px dashed lightgray;
                width: 100%;
                height: 500px;
                scroll-snap-type: x mandatory;
            }

            .container > div {
                text-align: center;
                scroll-snap-align: center;
                flex: none;
                line-height: 500px;
                font-size: 64px;
                width: 100%;
                height: 500px;
            }
            .container > div:nth-child(even) {
                background-color: #87ea87;
            }

            .container > div:nth-child(odd) {
                background-color: #87ccea;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div>Node.js</div>
            <div>Vue</div>
            <div>MySQL</div>
        </div>
    </body>
</html>

标签：container,100%,元素,height,align,snap,滑动,scroll,CSS
来源： https://www.cnblogs.com/alone4436/p/15260026.html