CSS |滚动捕捉类型

Scroll Snap 类型属性是 Scroll Snap 模块中的内置属性。如果没有 Scroll Snap 模块，图片库会看起来很可笑。在 Scroll Snap 模块之前，这个效果可以通过 JavaScript 来实现，但现在可以通过 CSS 来实现 Scroll Snap。

此属性对于在页面的某些特定点停止滚动很有用。您可以在网页的图库部分使用此属性。它会让你完全控制滚动。

句法：

scroll-snap-type: none | [ x | y | block | inline | both ] [ mandatory | proximity ]

属性值：此属性使用了许多如上所述和如下所述的值：

• none：此属性禁用将忽略捕捉点的滚动捕捉。
• x：此属性启用沿 x 轴的滚动对齐，适用于水平轴的对齐位置。
• y：此属性启用沿 y 轴的滚动对齐，适用于垂直轴的对齐位置。
• 块：此属性启用滚动捕捉与块轴一起工作在块轴的捕捉位置。
• inline：此属性启用滚动对齐以及作用于内联轴的对齐位置的内联轴。
• both：此属性启用包含 x、y、块和内联轴的双轴的滚动捕捉。
• 强制：此属性启用特定的严格值，在没有滚动时转到特定的滚动位置。
• 接近度：此属性启用转到特定滚动位置的特定严格值。如果滚动动作非常接近捕捉位置，如果不关闭，那么它将正常运行并且根本不应该捕捉。

示例：下面的示例将说明 Scroll Snap 类型属性：

  

    
    

  

    
        
GeeksforGeeks
        
CSS Scroll Snap Type
        

            

                

                

                

            
        
    

  
                    

输出：

支持的浏览器： Scroll Snap Type支持的浏览器如下：

• 谷歌浏览器 69
• 浏览器 11
• 火狐 68
• 野生动物园 11