[分享]css全屏滚动用什么实现

CSS全屏滚动是一种非常流行的页面效果，它可以让网页内容像PPT一样逐一滚动展示。那么，CSS全屏滚动实现有哪些方式呢？方式一：使用属性实现 这种方式是比较简单的一种实现方法，它通过设置父容器的属性为...

CSS全屏滚动是一种非常流行的页面效果，它可以让网页内容像PPT一样逐一滚动展示。那么，CSS全屏滚动实现有哪些方式呢？

方式一：使用position属性实现 

这种方式是比较简单的一种实现方法，它通过设置父容器的position属性为absolute，再设置子容器的position属性为relative，通过修改子容器的top属性值来实现滚动效果。这种方式实现起来比较容易，但是需要手动计算每一个滚动子容器的高度和位置，略显繁琐。

方式二：使用CSS动画实现 

使用CSS动画也可以实现全屏滚动效果。我们可以通过设置一个动画，然后对滚动容器进行遍历，在遍历的过程中不断地改变top值。这种方式的实现相对于第一种方式，有一个好处，就是不需要手动计算，非常方便。

方式三：使用jQuery插件实现 

我们可以使用一些现成的jQuery全屏滚动插件来实现这个效果，比如fullpage.js、onepage-scroll.js等等。这些插件不仅实现了全屏滚动效果，还实现了一些常用的功能，比如：滚动到某一屏后触发事件、动态增减滚动屏幕等等。

综上所述，CSS全屏滚动的实现方式有很多种，每一种都有自己的优缺点。根据个人需求，可以选择合适的方式进行实现。