scroll-snap-type结合scroll-snap-align使用和介绍

最新推荐文章于 2024-09-06 18:10:41 发布

@奇了怪了

最新推荐文章于 2024-09-06 18:10:41 发布

阅读量289

点赞数 5

文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/qq_56544885/article/details/141561657

版权

scroll-snap-type 主要用于需要控制滚动停止位置的场景，如图片轮播、产品列表、全屏滚动页面、时间轴等。它的应用使得用户在滚动时能获得更加平滑、自然的体验，并确保内容不会部分显示

scroll-snap-align 控制当用户停止滚动时，元素应该如何对齐。它在有 scroll-snap-type 属性的滚动容器中使用，通常用于创建自然的、流畅的滚动体验

`scroll-snap-type` 属性值

x: 启用水平方向的滚动捕捉。
y: 启用垂直方向的滚动捕捉。
block: 基于书写方向的块轴上进行捕捉（通常与 y 类似）。
inline: 基于书写方向的行内轴上进行捕捉（通常与 x 类似）。
both: 同时在水平方向和垂直方向启用滚动捕捉。
mandatory: 强制捕捉，滚动只能停止在捕捉点。
proximity: 允许接近捕捉点时停止滚动，如果接近但未达到捕捉点，则不会强制停止。

scroll-snap-align;:

center：当用户滚动到接近某个子元素时，滚动会自动停止，并将该子元素的中心对齐到滚动容器的可视区域中心。
start: 元素的开始位置（通常是左边或上边）与滚动容器的开始位置对齐。
end: 元素的结束位置（通常是右边或下边）与滚动容器的结束位置对齐。
none: 不启用捕捉对齐

简单试例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         .box{
            width: 100%;
            overflow: hidden;
            height: 400px;
         }
         .content{
            overflow-x: scroll;
            display: flex;
            scroll-snap-type: x mandatory;
         }
         .content::-webkit-scrollbar {
            display: none;
        }
         .content div{
            flex-shrink: 0;
            height: 400px;
            width: 100%;
            scroll-snap-align: center;
         }
         .div1{
            background-color: rebeccapurple;
         }
         .div2{
            background-color: aquamarine;
         }
         .div3{
            background-color: brown;
         }
    </style>
</head>
<body>
     <div class="box">
        <div class="content">
            <div class="div1">111</div>
            <div class="div2">222</div>
            <div class="div3">333</div>
        </div>
     </div>
</body>
</html>