CSS scroll-snap

移动端页面常用的一种滚动效果,一般是使用JavaScript,但是也可以使用CSS的scroll-snap来实现。

Scroll Snap

scroll-snap-type: none | [ x | y | block | inline | both ] [ mandatory | proximity ]?

定义滚动容器中的一个捕捉点如何被严格执行
滚动捕捉轴的值:
x 只在水平方向(x轴)捕捉定位点
y 只在垂直方向(y轴)捕捉定位点
block 捕捉块元素排列方向的定位点(默认文档流下是垂直方向)
inline 捕捉行内元素排列方向的定位点(默认是水平方向)
both 捕捉水平和垂直方向的定位点
执行规范:
none 忽略捕捉点,即平时正常的滚动;
mandatory 滚动结束时,滚动容器视图强制定位到捕捉点
proximity 滚动结束时,滚动容器视图可能(如果滚动停止的点离捕捉点足够近)定位到捕捉点

mandatory是实现滚动定位的一个关键值,滚动结束后会停留在定义的捕捉点上。

scroll-snap-points-x: none | repeat(length)
scroll-snap-points-y: none | repeat(length)

定义捕捉点的水平/垂直位置,none为没有捕捉点,repeat(<长度>)定义捕捉点从容器边缘开始的间隔

scroll-snap-align: [ none | start | end | center ]{1,2}

定义在子元素上的属性,捕捉点在子元素水平和垂直方向上的位置
none 不定义位置
start 起始位置(垂直方向是上边缘,水平是左边缘)
end 结束位置(垂直方向下边缘,水平是右边缘)
center 中心位置

实现开头部分的gif图的效果,滚动容器设置水平方向的捕捉点,对齐位置为子元素左上角(ios中safari浏览器需要设置-webkit-overflow-scrolling: touch;);然后可以设置样式来隐藏滚动条。

.wrap {
  /* ... */
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-snap-points-x: repeat(100%);
  -webkit-overflow-scrolling: touch;
}
.wrap::-webkit-scrollbar {
  display: none;
}

看着好像似乎大概可能还挺好用,如果不考虑浏览器兼容性的话...

或者使用css-scroll-snap-polyfill

滑动导航

通常出现在移动端的滑动效果,都会配套带一个dot导航,显示当前滚动的位置或者滚动到某个指定索引值的位置。

实现方式:
如果只用css,导航到固定索引位置的滑动可以使用锚点定位加scroll-behavior: smooth,然后要显示当前位置的那个点...就没有然后了...

这里突然想到好早以前看到的利用:checked选择器和transition实现的css slider Fluid CSS3 Slideshow with Parallax Effect

使用JavaScript的scrollTo,设置behavior: 'smooth'可以实现平滑滚动(需要兼容),可以看这个例子Scroll snap carousel with indicator buttons and no scrollbar

参考文章:
CSS Scroll Snap - CSS: Cascading Style Sheets | MDN
CSS Scroll Snap Module Level 1
大侠,请留步,要不过来了解下CSS Scroll Snap?
Well-Controlled Scrolling with CSS Scroll Snap
Building a modern carousel with CSS scroll snap, smooth scrolling, and pinch-zoom | Read the Tea Leaves
栗子:
Scroll Snapping Examples

Comments
Write a Comment