CSS 滚动捕获 scroll-snap-type

刺骨的言语ヽ痛彻心扉 2024-05-24 03:41 59阅读 0赞

*  scroll-snap-type
    
     *  语法
     *  实例
        
         *  捕获轴 y 捕获严格程度 mandatory
         *  捕获轴 y 捕获严格程度 proximity
         *  同理看下捕获轴 x
     *  一些注意事项
     *  兼容性

## scroll-snap-type ##

> 用来指定一个滚动容器(`scroll container`)是否是滚动捕获容器(`scroll snap container`)、捕获的严格程度以及在什么方向上执行捕获.

具体捕获的动画或物理效果不是由 `scroll-snap-type` 决定, 而是由浏览器决定.

?建议先读[这个名词介绍][Link 1]

### 语法 ###

`scroll-snap-type` 的内容由两部分组成, 滚动捕获轴和滚动捕获严格程度

*  `滚动捕获轴`:
    
     *  `x`: 滚动容器仅捕获`水平`轴上的滚动位置(`snap position`, 解释参考名词介绍)
     *  `y`: 滚动容器仅捕获`垂直`轴上的滚动位置.
     *  `block`: 滚动容器仅捕获`逻辑块`轴上的滚动位置.
     *  `inline`: 滚动容器仅捕获`逻辑水平`轴上的滚动位置.
     *  `both`: 滚动容器捕获两个轴上的滚动位置, 每个轴上捕获的元素可能不同
 *  `滚动捕获严格程度`:
    
     *  `none`: (默认值). 不捕获
     *  `mandatory`: 如果用户没有滚动操作时, 滚动容器`必须`捕获到一个滚动位置(`snap position`). 如果存在有效的捕获位置, 滚动容器`必须`在滚动停止时捕获.
     *  `proximity`: 滚动容器`可能`会在滚动停止时捕获到一个滚动位置, 这取决于浏览器设定的滚动参数.

### 实例 ###

#### 捕获轴 `y` 捕获严格程度 `mandatory` ####

.container {
        
      height: 200px;
      width: 300px;
      border: 1px solid #121212;
      overflow: auto;
    }
    .container div {
        
      height: 100%;
      scroll-snap-align: center;
    }
    .y-mandatory {
        
      scroll-snap-type: y mandatory;
    }

先暂停一下看看 `CSS`, 首先我们要给滚动容器设置 `scroll-snap-type: y mandatory;` 这样滚动容器就变成了滚动捕获容器, 单单这样还不行因为 `scroll-snap-align` 的默认值为 `none`, 这里先设置为 `center` 有个滚动效果, 后面会详细介绍 `scroll-snap-align`. 另外设置子元素和父元素高度相同

你会发现开发者工具能够识别滚动捕获容器, 并出现 `scroll-snap` 的标志  
![在这里插入图片描述][136ced1b8e33402cad3a494a09024cf9.png_pic_center]

如果你点一下这个标志, 浏览器就会展开滚动的内容, 并且用蓝色点表示 `scroll-snap-align`  
![在这里插入图片描述][ad8ff409ee484048bfb0da86ebecc663.png_pic_center]

下面就看看滚动的效果吧, 我们无法在两个子元素之间停住, 当滚动到某个点时, 最终停在哪个元素(或最终捕捉到哪个元素)也是浏览器决定的.

![在这里插入图片描述][d20325a7b46b458baa05564dcaacdd61.gif_pic_center]

#### 捕获轴 `y` 捕获严格程度 `proximity` ####

.y-proximity {
        
      scroll-snap-type: y proximity;
    }

你会看到, 我们可以明确在两个子元素之间停住, 就像定义中说的那样, 当滚动行为停止后, 是否发生捕获是根据浏览器的参数决定的.

![在这里插入图片描述][3b49f44e259142479071841c0d7e6ec0.gif_pic_center]

#### 同理看下捕获轴 `x` ####

先来捕获严格程度 `mandatory`

![在这里插入图片描述][18210b8483b04bcc9f407e158afcfe76.gif_pic_center]

再来捕获严格程度 `proximity`

![在这里插入图片描述][9563af0faabc4a6b83aa92f0a55192bc.gif_pic_center]

### 一些注意事项 ###

我们前面展示的内容, 每个子元素都和父元素同高, 假如某个子元素比父元素高呢?

.first-tall div:first-of-type {
        
      height: 200%;
      position: relative;
    }
    .first-tall div:first-of-type::before {
        
      content: '';
      position: absolute;
      left: 0; right: 0; bottom: 0;
      height: 50%;
      outline: 5px dashed black;
    }

对于内容过长的元素, 滑动到其最底端之前都不会出现捕获.

![在这里插入图片描述][47ccd5acfab84361a266632ca36b41a6.gif_pic_center]

### 兼容性 ###

兼容性不错

![在这里插入图片描述][6d5e6eaa90fd4e2faaa227014d509567.png_pic_center]

谢谢你看到这里?

[Link 1]: https://blog.csdn.net/broken_promise/article/details/134238764
[136ced1b8e33402cad3a494a09024cf9.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/51e61d11363e4b6f983839fced9e3c6b.png
[ad8ff409ee484048bfb0da86ebecc663.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/56582295ec5b4405b907020fbc94e803.png
[d20325a7b46b458baa05564dcaacdd61.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/da0a3053f67f40cca0fce9f3819ba448.gif
[3b49f44e259142479071841c0d7e6ec0.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/c8402e6c83984fdaa6587b91f381623d.gif
[18210b8483b04bcc9f407e158afcfe76.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/e95469f1e8ac43dda499babde0862c6d.gif
[9563af0faabc4a6b83aa92f0a55192bc.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/0075ab5ff2e948bab612d6d50a9676a1.gif
[47ccd5acfab84361a266632ca36b41a6.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/dc8af91a4b9247e3a948850b9ef969d6.gif
[6d5e6eaa90fd4e2faaa227014d509567.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/c35a3c4058c040edae85787ab21d2c33.png