效果

两句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; 

            
        
    

css代码