css3实现内容滚动,

　　最近学CSS的时候发现仅使用两个CSS属性就可以制作出全屏滚动效果。这两个属性是：

　　Scroll-Snap-Type Scroll-Snap-Align它可以用来实现fullpage.js的全屏滚动效果其实这种全屏滚动效果的原理很简单，就是用js来监控界面滚动，当界面滚动到一定值时，界面就一直滚动到下一屏，但是！考虑屏幕尺寸带来的兼容性问题是一件很麻烦的事情。

　　今天提到的这两个属性不能代替fullpage.js，原因有以下两点：

　　他们在浏览器上有兼容性问题。CSS属性不能监听事件，所以它不能在动画结束时提供回调函数。

1. 兼容性

　　目前主流浏览器已经支持这两个CSS属性，大家可以放心使用。如果你需要兼容IE浏览器，那么请选择fullpage.js

2. 使用

　　用的方法其实很简单。scroll-snap-type属性放在需要全屏滚动的容器的父容器上中，而scroll-snap-align需要放在全屏滚动的容器上。多说无益。我们直接看代码就能清楚地知道如何使用这两个CSS属性。

　　整个网页的完整代码很简单，直接贴在下面：

　　！doctype html lang= zh head meta charset= utf-8 /meta http-equiv= x-ua兼容content= ie=edge /meta name= viewport content= width=device-width，initial-scale=1.0 /titles scroll snap/title样式body { margin:0；}。容器{高度：100 vh溢出y:滚动；/*在父容器上面使用滚动捕捉类型属性*/滚动捕捉类型：y强制；}第{填充：112像素高度：calc(100 VH-224 px)；颜色：白色；/*在需要滚动的容器上使用滚动捕捉对齐属性*/滚动捕捉对齐：开始；}章节：类型(1) {背景色：# 60af 15}节：类型(2) {背景色：#158 baf}章节：类型(3) {背景色：#af 1581} H3节{字体大小：48px} p节{字体大小：20px}/style/head body div class= container section H3 a副标题住在这里/h3p lorem ipsum pain sit amet因此肥胖选择。我们很快就要起诉杜米乌斯了我指控丹尼斯，我们很快提升了公爵夫人的地位。我是迈克西姆我是马克西姆，重新运行在volatibbus来了。指责不负责任，直到其后果导致有罪的累积债务判以不同的过失例外的越狱是大规模的模式高尚、堕落、投机性的赌博在什么情况下会引起怨恨的索赔人在一个月的时间内得到解决呢？的问题是什么呢？我的意思是，这是一个很大的错误，我的意思是，我的意思是，我的意思是，我的意思是，我的意思是，我的意思是，我的意思是，我的意思是，我的意思是，我的意思是，我的意思是阿利奇运动是最大的胎盘打击意志意志意志意志。在康莫德斯的过错下，债务堆积如山，埃厄斯的错误和解释了哈伦在ipsum iste劳动的自由劳动者马尼少校不在我们身边任何巴黎官场谁几乎拒绝逮捕美国汽车工程师学会(Society of Automotive Engineers)类似的真正的维泰意志！快去找100元/p/节h3A分节生活在这里/h3 p Lorem ipsum疼痛坐下来，结果肥胖选择。我们很快就要起诉杜米乌斯了我指控丹尼斯，我们很快提升了公爵夫人的地位。我是迈克西姆我是马克西姆，重新运行在volatibbus来了。指责不负责任，直到其后果导致有罪的累积债务判以不同的过失例外的越狱是大规模的模式高尚、堕落、投机性的赌博在什么情况下会引起怨恨的索赔人在一个月的时间内得到解决呢？的问题是什么呢？我的意思是，这是一个很大的错误，我的意思是，我的意思是，我的意思是，我的意思是，我的意思是，我的意思是，我的意思是，我的意思是，我的意思是，我的意思是，我的意思是阿利奇运动是最大的胎盘打击意志意志意志意志。在康莫德斯的过错下，债务堆积如山，埃厄斯的错误和解释了哈伦在ipsum iste劳动的自由劳动者马尼少校不在我们身边任何巴黎官场谁几乎拒绝逮捕美国汽车工程师学会(Society of Automotive Engineers)类似的真正的维泰意志！快去找100元/p/节h3A分节生活在这里/h3 p Lorem ipsum疼痛坐下来，结果肥胖选择。我们很快就要起诉杜米乌斯了我指控丹尼斯，我们很快提升了公爵夫人的地位。我是迈克西姆我是马克西姆，重新运行在volatibbus来了。指责不负责任，直到其后果导致有罪的累积债务判以不同的过失例外的越狱是大规模的模式高尚、堕落、投机性的赌博在什么情况下会引起怨恨的索赔人在一个月的时间内得到解决呢？的问题是什么呢？我的意思是，这是一个很大的错误，我的意思是，我的意思是，我的意思是，我的意思是，我的意思是，我的意思是，我的意思是，我的意思是，我的意思是，我的意思是，我的意思是阿利奇运动是最大的胎盘打击意志意志意志意志。在康莫德斯的过错下，债务堆积如山，埃厄斯的错误和解释了哈伦在ipsum iste劳动的自由劳动者马尼少校不在我们身边任何巴黎官场谁几乎拒绝逮捕美国汽车工程师学会(Society of Automotive Engineers)类似的真正的维泰意志！快去找/p /section /div /body/html可以看到代码并不复杂，下面我们就着重讲解一下这两个CSS(CSS)属性。

3. scroll-snap-type

　　此CSS属性具有以下值：

　　None:当该滚动容器的可视视口滚动时，不进行任何处理。

　　x:滚动容器仅捕获其水平轴上的捕获位置。y:滚动容器仅在其垂直轴上捕捉捕捉位置。块：滚动容器仅捕捉到其块轴上的捕捉位置。内嵌：滚动容器仅捕捉到其内嵌轴上的捕捉位置。Both:滚动容器将独立地捕捉到它们在两个轴上的位置(每个轴上的不同元素可能会被捕捉)。mandatory:如果滚动容器滚动，超过临界值后会自动滚动到下一个容器。proximity:如果滚动容器滚动，超过临界值后不会自动滚动到下一个容器。一定要注意上面用粗体标注的几个属性。使用强制意味着全屏滚动。当滚动到某个阈值时，它会自动滚动到下一个屏幕。如果不滚动通过某个阈值，就会反弹。

　　接近度则不同：滚过一定阈值后，可以正常滚动(而强制则直接进入下一屏)。如果它没有滚动通过某个阈值，它将会反弹。

　　理解这两个属性其实很简单。把上面的代码改一下，自己体验一下。

　　注意：在使用mandatory时，如果谨慎使用滚动容器的高度已经大于屏幕的高度时，可能会因为强制滚动而导致某些内容非常难以阅读。

4. scroll-snap-align

　　此CSS属性具有以下值：

　　None:该容器不会捕获父容器上定义的相应轴。开始：容器被捕获的位置是容器的开始。末端：容器被捕获的位置是容器的末端。中心：容器的捕获位置是容器的中间部分。

　　用一张图形象地理解这些属性所代表的容器位置：

5. 最后

　　因为看到了其它属性大部分都存在很严重的兼容性问题的scroll-snap，这里就不赘述了。有兴趣可以去CSS Scroll Snap直接查看。但是，使用以上两个属性，其实是完全够用的。

　　参考文章：

　　滚动对齐MDN

　　滚动卡扣式MDN

　　实用的CSS滚动捕捉

　　以上就是本文关于CSS实现fullpage.js全屏滚动效果的示例代码。更多相关CSS全屏滚动内容，请搜索之前的文章或者继续浏览下面的相关文章。希望你以后能支持我！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。