滚动到当前屏时,当前屏的数据才显现,这种效果是怎么实现的?

类似这种的效果:https://ant.design/index-cn

当滚动到第二屏时,第二屏的数据才从左右两边出现,滚动到第三屏时,第二屏的数据渐渐消失,第三屏的数据出现。

请问这种效果叫什么?它的实现思路是怎样的?


素胚勾勒不出你
浏览 465回答 1
1回答

拉风的咖菲猫

可以看到这个页面是用 React 写的,所以你需要安装 React Developer Tools 这个插件。实现这个效果的是&nbsp;<ScrollOverPack />&nbsp;这个组件:发现有个&nbsp;scrollEvent(props.scrollEvent()) 函数,应该就是这个函数控制的。控制台输入&nbsp;$r.props.scrollEvent:之后就可以看到实现的函数:&nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;onScrollEvent(e)&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;clientHeight&nbsp;=&nbsp;document.documentElement.clientHeight;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;header&nbsp;=&nbsp;document.getElementById('header');&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(e.pageY&nbsp;>=&nbsp;clientHeight)&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(header.className.indexOf('home-nav-bottom')&nbsp;<&nbsp;0)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;header.className&nbsp;+=&nbsp;'&nbsp;home-nav-bottom'; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;else&nbsp;if&nbsp;(header.className.indexOf('home-nav-bottom')&nbsp;>=&nbsp;0)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;header.className&nbsp;=&nbsp;header.className.replace(/home-nav-bottom/ig,&nbsp;''); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;}其实就是判断是否滑动到对应的位置,然后添加或者删除 CSS 类名,动画是 CSS 实现的。
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript