的CSS 湖北福彩捕捉

湖北福彩捕捉CSS中的新属性

十月4，2018 1K浏览
    • 内容 隐藏
    1) 的CSS 中的Scroll Snapping属性是什么？
    2) 浏览器支持
    2.1) 桌面
    2.2) 手机/平板电脑
    3) 用法
    3.1) 垂直–湖北福彩捕捉属性
    3.2) 水平–湖北福彩捕捉属性
    3.3) X和Y两者-湖北福彩捕捉属性

    的CSS 中的Scroll Snapping属性是什么？

    湖北福彩捕捉是在湖北福彩操作完成后将湖北福彩容器的湖北福彩偏移调整到首选捕捉位置的动作。

    这意味着，即使您尝试在实现此目的的网页上湖北福彩到自己想要的位置，网页的该部分也可以自动对齐到特定部分。在上面给出的演示中，您将观察到我试图从一个区域向下湖北福彩到另一个区域（通过背景颜色进行区分），但是当我到达该区域的特定开始或结束位置时，浏览器本身会覆盖我的区域湖北福彩位置，无论网页代码中写的是什么。

    浏览器支持

    该浏览器支持数据来自 我可以用吗 ，其中有更多详细信息。数字表示浏览器支持该版本及更高版本的功能。

    桌面

    铬 歌剧 火狐浏览器 IE浏览器 浏览器 边缘 苹果浏览器
    69 没有 64 11* 18* 11

    手机/平板电脑

    iOS 苹果浏览器 歌剧 Mobile 歌剧迷你 安卓 铬 火狐浏览器
    11.0-11.2 没有 没有 67 69 62

    用法

    垂直–湖北福彩捕捉属性

    1. The body tag should have a scroll-snap-type property set to y mandatory. This will define the rule of how strictly the 捕捉点 are enforced in the browser. 其他 than mandatory, it can have none or proximity as its value. We’ll use mandatory, because, well we really need a strict rule so that the user is not able to scroll any further. The y before mandatory tells on which axis the scroll-snap will be performed.
    2. Still inside the body, make overflow-y to scroll. It could also have been visible, hidden or auto, but we want to have the scrolling.
    3. For the section, kindly add the scroll-snap-align property to start.
    的HTML 
    
<div class='container'>
    <section class='child'></section>
    <section class='child'></section>
    <section class='child'></section>
    ...
</div>
    的CSS 
    
.container {
    scroll-snap-type: y mandatory;
}
.child {
    scroll-snap-align: start;
}

    CodePen。

    水平–湖北福彩捕捉属性

    为了制作水平滑块，我们告诉容器在其x轴上捕捉。我们还使用湖北福彩填充来确保子元素贴合到容器的中间。

    的CSS 
    
.container {
    scroll-snap-type: x mandatory;
    scroll-padding: 50%;
}

    然后，我们告诉容器要捕捉到的点。为了使图库居中，我们将每个元素的中间点定义为捕捉点。

    的CSS 
    
.child {
    scroll-snap-align: center;
}

    X和Y两者-湖北福彩捕捉属性

    Scroll snapping can work in two directions at the same time. Again, we can set scroll-snap-type directly on the <body> element:

    的CSS 
    
.container {
    scroll-snap-type: both mandatory;
}

    然后，我们将每个图块的左上角定义为捕捉点：

    的CSS 
    
.tile {
    scroll-snap-align: start;
}


    查看更多文章 的CSS

    • 标签： , , , ,
    • 启用通知    好 不用了，谢谢