CSS Scroll Snap实现滚动捕捉及填充滚动容器空白区域

CSS Scroll Snap是一个引入滚动捕捉位置的CSS模块，用于强制滚动容器的滚动端口在滚动操作完成后可能结束的滚动位置。

注意：此模块的早期版本称为Scroll Snap Points，现在已弃用。CSS Scroll Snap是当前的。

容器上的CSS属性

Children子容器上的CSS属性

scroll-snap-type

属性定义在滚动容器中的一个snap（快照）点如何被严格的执行。此属性不能用来指定任何精确的动画或者物理运动效果来执行snap点，而是交给用户代理来处理。

/* 关键值 */
scroll-snap-type: none;
scroll-snap-type: mandatory;
scroll-snap-type: proximity;

/* 全局值 */
scroll-snap-type: inherit;
scroll-snap-type: initial;
scroll-snap-type: unset;

取值

none：当这个滚动容器的可视的viewport是滚动的，它必须忽略snap点。
mandatory：如果它当前没有被滚动，这个滚动容器的可视视图将静止在snap点上。意思是当滚动动作结束，如果可能，它会snap在那个点上。如果内容被添加、移动、删除或者重置大小，滚动偏移将被调整为保持静止在snap点上。
proximity：如果它当前没有被滚动，这个滚动容器的可视视图将基于基于用户代理滚动的参数去到snap点上。如果内容被添加、移动、删除或者重置大小，滚动偏移将被调整为保持静止在snap点上。

正式语法

none | [ x | y | block | inline | both ] [ mandatory | proximity ]

scroll-snap-align

该scroll-snap-align属性将框的捕捉位置指定为其快照容器的snapport（作为对齐容器）中其捕捉区域（作为对齐主题）的对齐方式。这两个值分别指定块轴和内联轴中的捕捉对齐。如果仅指定了一个值，则第二个值默认为相同的值。

语法部分

/* 关键值 */
scroll-snap-align: none;
scroll-snap-align: start end; /* 当第一个设置的两个值为块时，第二个值为内联

 */
scroll-snap-align: center;

/* 全局值 */
scroll-snap-align: inherit;
scroll-snap-align: initial;
scroll-snap-align: unset;

取值

none：该框未定义该轴的捕捉位置。
start：此框的滚动捕捉区域在滚动容器的支撑内的开始对齐是此轴中的捕捉位置。
end：滚动容器的snapport中此框的滚动捕捉区域的末端对齐是此轴中的捕捉位置。
center：此框的滚动捕捉区域在滚动容器的支架内的中心对齐方式是此轴上的捕捉位置。

正式语法

[ none | start | end | center ]{1,2}

滚动捕捉事例

当上下滚动时，每次子节点section都会对齐上方父节点article顶部。

.scroller {
    height: 300px;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
}

.scroller section {
    scroll-snap-align: start;
}

<article class="scroller">
    <section>
        <h2>Section one</h2>
        <p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko.</p>
    </section>
    <section>
        <h2>Section two</h2>

        <p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko.</p>
    </section>
    <section>
        <h2>Section three</h2>
        
        <p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko.</p>
    </section>
</article>

填充滚动容器空白区域

例如顶部有一个fixed容器，当你点击某一个锚点

<a href="#bananer">回到bananer元素容器位置</a>

你会发现你的bananer容器会被fixed容器盖住一点，这个时候，你可以选择给父元素添加：

body {
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scroll-padding-top: 70px; /*fixed容器高度*/
}

或者给滚动容器的子元素即bananer容器添加

#bananer{
  scroll-margin-top: 70px;
}

参考链接：

CSS Scroll Snap实现滚动捕捉及填充滚动容器空白区域

CSS Scroll Snap实现滚动捕捉及填充滚动容器空白区域相关文章

网站标签聚合

最新文章