avatarGithub

6行css实现fullpage

2022-07-20

Fullpage效果在很多官网，活动页都被经常用到。之前我们一般都会用fullpage.js来实现这个效果。但他有两个缺点

  1. 付费
  2. 基于JS，包大小为56.6KB

最近在无意间发现了一个新的css属性 scroll-snap，可以用几行css就实现fullpage效果。废话不多说，直接上demo


.scroll-container {
height: 100vh;
overflow-y: scroll;
scroll-snap-type: y mandatory;
}
.section {
height: 100vh;
scroll-snap-align: start;
scroll-snap-stop: always;
}

只需要这几行代码，就可以实现了。

利用这个css属性，我们还可以轻松实现轮播图效果