作者：?緝熙Soyaine
簡(jiǎn)介：JavaScript30 是 Wes Bos 推出的一個(gè) 30 天挑戰(zhàn)。項(xiàng)目免費(fèi)提供了 30 個(gè)視頻教程、30 個(gè)挑戰(zhàn)的起始文檔和 30 個(gè)挑戰(zhàn)解決方案源代碼。目的是幫助人們用純 JavaScript 來寫東西，不借助框架和庫(kù)，也不使用編譯器和引用。現(xiàn)在你看到的是這系列指南的第 13 篇。完整指南在 GitHub，喜歡請(qǐng) Star 哦?(^?*)

創(chuàng)建時(shí)間：2017-07-14
最后更新：2017-07-18

實(shí)現(xiàn)效果

頁(yè)面中的文章有幾張配圖，隨著頁(yè)面上下滾動(dòng)，圖片位置劃過圖片一半時(shí)，圖片從兩側(cè)滑入；圖片位置離開可見區(qū)域時(shí)，圖片向兩側(cè)滑出。

Scroll 效果演示

下圖中藍(lán)色方框位置即是圖片所占位置，初始文檔中已經(jīng)寫好了內(nèi)容及樣式，需要完成控制圖片顯示部分的代碼來實(shí)現(xiàn)圖片滑動(dòng)的效果。

pic

知識(shí)點(diǎn)

涉及控制圖片的 CSS 屬性：

• translateX 來控制左右移動(dòng)
• scale 來控制縮放

涉及頁(yè)面尺寸的屬性：

• window.scrollY 文檔從頂部開始滾動(dòng)過的像素值
• window.innerHeight viewport 部分的高度
• ele.height 元素的高度
• ele.offsetTop 當(dāng)前元素頂部相對(duì)于其 offsetParent 元素的頂部的距離。

debounce 的作用：
降低事件監(jiān)聽的頻率，使用了 Lodash 中的 debounce 方法。

解決思路

1. 獲取頁(yè)面中的所有圖片元素
2. 滾動(dòng)事件監(jiān)聽
3. 尺寸獲取及處理
4. 滾動(dòng)至指定區(qū)域的條件判斷

過程指南

1. 獲取所有涉及到的圖片

   const slideImages = document.querySelectorAll('.slide-in');
   

2. 滾動(dòng)事件監(jiān)聽

       function checkSlide(e) {
           console.log(e);
           console.count(e);
       }
   
       window.addEventListener('scroll', debounce(checkSlide));
   

   針對(duì)頁(yè)面的滾動(dòng)事件進(jìn)行監(jiān)聽，可以先打出事件對(duì)象來看看。同時(shí)在接下來的調(diào)試過程中也能利用這打出各個(gè)尺寸的值，來幫助我們感受每個(gè)尺寸的含義。
   此外由于每次滾動(dòng)都觸發(fā)監(jiān)聽事件，會(huì)降低 JavaScript 運(yùn)行性能，所以用 debounce 函數(shù)來降低觸發(fā)的次數(shù)。
3. 針對(duì)每次監(jiān)聽到的滾動(dòng)事件，遍歷所有圖片元素，判斷是否顯示或隱藏圖片。由于圖片的顯示控制只需通過增減 .active 類，此處的重點(diǎn)在于判斷的條件如何確認(rèn)，為便于形象地感受頁(yè)面滾動(dòng)時(shí)，各個(gè)尺寸的變化，我畫了一張示意圖，如下：
   
   

   尺寸示意圖
   
   其中<label style="color: rgba(255, 153, 0, 0.5);">橙色半透明</label>部分指可滾動(dòng)頁(yè)面整體，<label style="color: #f90">橙色標(biāo)注</label>部分是指會(huì)隨著頁(yè)面滾動(dòng)而變化的尺寸，黑色標(biāo)注的尺寸是固定不變的。
   頁(yè)面的滑動(dòng)過程經(jīng)過了兩個(gè)臨界點(diǎn)，一個(gè)是下滑到圖片的一半處，另一個(gè)是完全滑過圖片使圖片已不再視窗之內(nèi)，分別決定了圖片的顯示和隱藏。

   // 滑動(dòng)頁(yè)面的底部距離扣除圖片一半的高
   const slideInAt = (window.scrollY + window.innerHeight) - img.height / 2;
   // 圖片底部距離頂端的距離
   const imgBottom = img.offsetTop + img.height;
   

   需要利用兩個(gè)臨界點(diǎn)來判斷圖片是否處在需要顯示的區(qū)域內(nèi)，故利用兩個(gè)值來存取此條件的結(jié)果（以保證每次事件監(jiān)聽的結(jié)果賦值給常亮后，不會(huì)隨 window 的屬性值變化）。

   // 已滑過了圖片的一半
   const isHalfShow = slideInAt > img.offsetTop;
   // 未完全滑過圖片
   const isNotScrollPast = window.scrollY < imgBottom;
   

4. 對(duì)于滿足顯示條件的，給此圖片添加 .active 類，不滿足的則去掉。

   if (isHalfShow && isNotScrollPast) {
       img.classList.add('active');
   } else {
       img.classList.remove('active');
   }
   

   至此，圖片控制邏輯已全部完成。
   親手滑動(dòng)感受一下吧o(*≧▽≦)ツ