两句css代码实现全屏滚动效果-demo案例

发布时间：2025-03-23 20:57:34

8 阅读

0 评论

文章标签： html全屏

效果

两句css代码实现全屏滚动效果

html代码


    
        
            第一屏内容
            
                在父容器上使用scroll-snap-type 属性 

                第一个参数y 是y轴捕捉位置 

                mandatory 超过距离则自动滚动到下一个容器 

                scroll-snap-type:y mandatory 

 
                在需要滚动的容器上使用 scroll-snap-align 属性 

                start 开始部分 end 结束部分 center 中间部分 

                scroll-snap-align:start; 

            
        
        
            第二屏内容
            
                在父容器上使用scroll-snap-type 属性 

                第一个参数y 是y轴捕捉位置 

                mandatory 超过距离则自动滚动到下一个容器 

                scroll-snap-type :y mandatory 

 
                在需要滚动的容器上使用 scroll-snap-align 属性 

                start 开始部分 end 结束部分 center 中间部分 

                scroll-snap-align:start; 

            
        
        
            第三屏内容
            
                在父容器上使用scroll-snap-type 属性 

                第一个参数y 是y轴捕捉位置 

                mandatory 超过距离则自动滚动到下一个容器 

                scroll-snap-type :y mandatory 

 
                在需要滚动的容器上使用 scroll-snap-align 属性 

                start 开始部分 end 结束部分 center 中间部分 

                scroll-snap-align:start;