CSS新特性 - Scroll Snap滚动捕捉

 #main{ 
        width:600px; height:100px; border:1px black solid; margin:100px; overflow: auto;
        scroll-snap-type: x mandatory;
    }
 #main ul{ width:4000px;}
 #main li{ width:300px; height:100px; background: red; float: left; margin:0 100px;
        scroll-snap-align: end;
    }

  在父级元素上面添加属性 scroll-snap-type: x mandatory; (x表示轴向横向 , mandatory表示强制的 [ 可选值有 mandatory / proximity / none ] ) ; 然后在子元素上添加对齐方式属性 scroll-snap-align: end 表示子元素与父元素靠后对齐 ( 可选值有 start / center / end )

posted @ 2021-01-05 22:30  玖先生  阅读(246)  评论(0)    收藏  举报