实现滚动贴合的css元素及设置

最新推荐文章于 2023-10-12 16:58:19 发布

结城明日奈是我老婆

最新推荐文章于 2023-10-12 16:58:19 发布

阅读量568

点赞数

分类专栏： html学习专栏文章标签： css html 前端

本文链接：https://blog.csdn.net/yasinawolaopo/article/details/121076209

版权

html学习专栏专栏收录该内容

36 篇文章 0 订阅

订阅专栏

实现滚动贴合的css元素及设置

<!DOCTYPE html>
<html>
    <head>
        <title>实现页面滚动贴合</title>
    </head>
    <body>
        <main>
            <section>页面1</section>
            <section>页面2</section>
            <section>页面3</section>
            <section>页面4</section>
            <section>页面5</section>
        </main>
    </body>
</html>

css元素 :

scroll-snap-type: y mandatory;

第一个值 : 表示滚动贴合的方向

y : 纵向滚动贴合

x : 横向滚动贴合

第二个值 : 表示贴合方式

mandatory : 表示强制滚动

proximity : 当元素移动到离贴合点小于一定的距离的时候在进行贴合（注:这个距离是根据浏览器自己规定的）

**设置子元素贴合对齐方式 : **

scroll-snap-align:start

start : 下一屏的内容就会贴到main元素的顶部

end : 下一屏的内容就会贴到main元素的底部

center : 下一屏的内容就会与main元素垂直居中对齐

水平滚动贴合案例:

<!DOCTYPE html>
<html>
    <head>
        <title>实现页面滚动贴合</title>
        <style type="text/css">
            main{
                display: flex;
                scroll-snap-type: x mandatory;
                overflow: scroll;
                height: 100vh;
                width: 100vw;
            }
            section{
                width: 100vw;
                height: 100vh;
                scroll-snap-align: start;
                flex-shrink: 0;
            }
            section:nth-child(1){
                text-align: center;
                background-color: aqua;
                color: #fff;
            }
            section:nth-child(2){
                text-align: center;
                background-color: blue;
                color: #fff;
            }
            section:nth-child(3){
                text-align: center;
                background-color:blueviolet;
                color: #fff;
            }
        </style>
    </head>
    <body>
        <main>
            <section>页面1</section>
            <section>页面2</section>
            <section>页面3</section>
            <section>页面4</section>
            <section>页面5</section>
        </main>
    </body>
</html>

flex-shrink使用详情

flex-shrink的详细作用尝试

给容器设置间距案例:

<!DOCTYPE html>
<html>
    <head>
        <title>实现页面滚动贴合</title>
    </head>
    <body>
        <main>
            <h1>标题一</h1>
            <section>页面1</section>
            <section>页面2</section>
            <section>页面3</section>
            <section>页面4</section>
            <section>页面5</section>
        </main>
    </body>
</html>

给h1的属性:

h1{
	height: 80px;
	position: sticky;
	top: 0;
	background-color: #fff;
}

若设置为贴合顶部则会有些元素会被覆盖。

可以在mian中设置css :

scroll-padding: 80px;

大小与h1高度一致

注意 : scroll-snap-align为start时，看到另一元素的80px才能进行贴合

也可以用在ul ,li中

<main>
    <ul>
    	<li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</main>

ul{
    scroll-snap-type: y mandatory;
}
li{
    scroll-snap-align: start;
}

结城明日奈是我老婆

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
实现滚动贴合的css元素及设置

实现滚动贴合的css元素及设置<!DOCTYPE html><html> <head> <title>实现页面滚动贴合</title> </head> <body> <main> <section>页面1</section> <section>页面2</sectio
复制链接

扫一扫