详解运用css实现fullpage.js全屏滚动
发布时间：2022-04-20 09:00:46 所属栏目：语言 来源：互联网
导读：全屏滚动效果是网页设计中比较常见的，能够给用户良好的视觉和交互体验。一般我们用fullpage.js来实现全屏滚动，fullpage.js是一个基于jQuery的插件，能够轻松制作出全屏网站。其实CSS也能实现全屏滚动效果，下面我们来具体看看。 最近研究CSS的时候发现了仅
|
全屏滚动效果是网页设计中比较常见的，能够给用户良好的视觉和交互体验。一般我们用fullpage.js来实现全屏滚动，fullpage.js是一个基于jQuery的插件，能够轻松制作出全屏网站。其实CSS也能实现全屏滚动效果，下面我们来具体看看。 最近研究CSS的时候发现了仅使用两个CSS属性就可以制作出全屏滚动效果 ，这两个属性就是： scroll-snap-type scroll-snap-align 使用它就可以实现 fullpage.js 这种全屏滚动效果，其实，这种全屏滚动效果的理论非常简单，就是使用js监听界面滚动，当界面滚动到某个值时就让界面持续滚动到下一个屏幕，但是！要考虑到屏幕尺寸大小带来的兼容性问题就是一件非常麻烦的事情。 今天说的这两个属性并不能替代 fullpage.js ，有下面2个原因： 它们在浏览器上面存在兼容性问题。 CSS属性无法监听事件，也就无法提供动画完成时的回调函数。 1. 兼容性 目前主流的浏览器都已经支持了这两个CSS属性，可以放心的使用。如果你需要兼容IE浏览器，那么请选择 fullpage.js 。 2. 使用 使用的方法其实很简单， scroll-snap-type 属性放在 需要全屏滚动的容器的父容器上 ，而 scroll-snap-align 则需要 放在全屏滚动的容器上 ，多说无益，我们直接来看一下代码就可以很清楚的知道如何使用这两个CSS属性。 整个网页的完整代码很简单，下面直接将它贴上来： <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>CSS scroll snap</title> <style> body { margin: 0; } .container { height: 100vh; overflow-y: scroll; /* 在父容器上面使用 scroll-snap-type 属性 */ scroll-snap-type: y mandatory; section h3 { font-size: 48px; } section p { font-size: 20px; } </style> </head> <body> <div class="container"> <section> <h3>A subtitle lives here</h3> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus deleniti dignissimos ducimus expedita iure maxime qui rerum veniam voluptatibus. Accusamus asperiores assumenda atque consectetur consequuntur culpa cum deserunt dicta distinctio error excepturi fuga ipsa iste magnam modi nobis, obcaecati, pariatur perspiciatis placeat quo quod reiciendis repudiandae saepe soluta tempora unde vel? Aliquam exercitationem iste maiores placeat reprehenderit voluptates voluptatum. Ad at commodi culpa cumque debitis delectus dolorum, eius error et explicabo harum in ipsum iste labore laborum libero magni maiores nam non nostrum nulla officia pariatur quam quasi quia quo recusandae reprehenderit saepe similique vel vero vitae voluptas voluptatem! Quibusdam. （编辑：南通站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
