CSS 实现滑动整个元素

2021-09-12 21:03:34 阅读：174 来源： 互联网

标签：container 100% 元素 height align snap 滑动 scroll CSS

其实没什么难点，主要就是两个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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

CSS 实现滑动整个元素