首頁猿問滾動到當(dāng)前屏?xí)r，當(dāng)前屏的數(shù)據(jù)才顯現(xiàn)...

滾動到當(dāng)前屏?xí)r，當(dāng)前屏的數(shù)據(jù)才顯現(xiàn)，這種效果是怎么實現(xiàn)的？

JavaScript

素胚勾勒不出你 2018-10-17 13:14:45

類似這種的效果：https://ant.design/index-cn當(dāng)滾動到第二屏?xí)r，第二屏的數(shù)據(jù)才從左右兩邊出現(xiàn)，滾動到第三屏?xí)r，第二屏的數(shù)據(jù)漸漸消失，第三屏的數(shù)據(jù)出現(xiàn)。請問這種效果叫什么？它的實現(xiàn)思路是怎樣的？

查看完整描述

1 回答

拉風(fēng)的咖菲貓

TA貢獻1995條經(jīng)驗獲得超2個贊

可以看到這個頁面是用 React 寫的，所以你需要安裝 React Developer Tools 這個插件。
實現(xiàn)這個效果的是 <ScrollOverPack /> 這個組件：

發(fā)現(xiàn)有個 scrollEvent（props.scrollEvent()）函數(shù)，應(yīng)該就是這個函數(shù)控制的。

控制臺輸入 $r.props.scrollEvent：

之后就可以看到實現(xiàn)的函數(shù)：

    function onScrollEvent(e) {      var clientHeight = document.documentElement.clientHeight;      
    var header = document.getElementById('header');      if (e.pageY >= clientHeight) {        
    if (header.className.indexOf('home-nav-bottom') < 0) {
          header.className += ' home-nav-bottom';
        }
      } else if (header.className.indexOf('home-nav-bottom') >= 0) {
        header.className = header.className.replace(/home-nav-bottom/ig, '');
      }
    }

其實就是判斷是否滑動到對應(yīng)的位置，然后添加或者刪除 CSS 類名，動畫是 CSS 實現(xiàn)的。

反對回復(fù) 2018-11-16