使用scroll-snap实现吸附效果

这篇文章发表于 2021年11月05日,星期五,23:02

1、 效果:

在这里插入图片描述

2、代码

css:

.list {
    display: flex;
    flex-direction: row;
    overflow: auto;
    white-space: nowrap;
    scroll-snap-type: x mandatory;
}
.content {
    flex-wrap: 0;
    flex-shrink: 0;
    height: 100px;
    width: 300px;
    scroll-snap-align: start;
    display: inline-block;
    text-align: center;
    font-size: 48px;
}

html:

<div class="list"> <div class="content">1</div> <div class="content">2</div> <div class="content">3</div> <div class="content">4</div> <div class="content">5</div> </div>

语法介绍

scroll-snap-type

  • none: 默认值,忽略捕捉位置
  • x: 捕捉水平轴上的定位点
  • y: 捕捉垂直轴上的定位点
  • block: 捕捉块元素排列轴上的定位点
  • inline: 捕捉内联元素排列方向上的定位点
  • both: 捕捉水平轴和垂直轴上的定位点
  • mandatory: 容器的可视视图将“强制”静止在临时点上,无论是添加、删除、移动或者大小改变。
  • proximity: 如果它当前没有被滚动,这个滚动容器的可视视图将基于基于用户代理滚动的参数去到临时点上。如果内容被添加、移动、删除或者重置大小,滚动偏移将被调整为保持静止在临时点上。

scroll-snap-align

这个属性作用在子元素上。

  • none: 不定义捕捉位置
  • start: 起始位置对其
  • end: 结束为止对其
  • center: 子元素的中心与容器的中心对齐。
scroll-snap-align: none;
scroll-snap-align: start end; /start: 表示块元素方向的定位方式,end: 表示内联元素的定位方式。/
scroll-snap-align: center;
关于博主: 评论和私信会在第一时间回复
版权声明: 本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!