[css] 你知道全屏滚动的原理是什么吗？它用到了CSS的哪些属性？

最新推荐文章于 2024-09-07 09:15:00 发布

前端小歌谣

最新推荐文章于 2024-09-07 09:15:00 发布

阅读量1.1k

点赞数 25

分类专栏： # 前端面试题css目录汇总

本文链接：https://blog.csdn.net/weixin_43392489/article/details/113810600

版权

前端面试题css目录汇总专栏收录该内容

416 篇文章

订阅专栏

本文介绍了全屏滚动的原理，涉及CSS中overflow属性的使用，以及如何通过JavaScript实现滚动交互。同时提到了fullpage等插件在实际项目中的应用，并鼓励读者坚持学习前端知识，共同探讨技术问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

[css] 你知道全屏滚动的原理是什么吗？它用到了CSS的哪些属性？

全屏滚动和轮播图类似，都是通过改变元素位置或者显示与隐藏来实现，配合JS的一些交互距离判断，实现类似原生滚动捕获的效果。这里全屏的话就需要将宽高都设置为窗口的大小，可以通过百分百实现。
关键CSS属性是父容器 overflow: hidden; 。
实现全屏滚动还可以简单的通过插件来实现，比如fullpage，很多大公司的页面都是用这个实现的，比如小米一些产品的官网。