第十三堂 – Slide in on Scroll

 邏輯流程
取得所有圖片element
監聽畫面捲動事件，觸發函式
函式判斷畫面位置與圖片位置，決定是否滑入圖片
課程重點
debounce：由於實作中監聽畫面捲動事件時，每捲一格其實會觸發超級多次函式，當函式複雜的時候是會影響效能的。因此debounce就是限制一個時間內，函式只會被呼叫一次。而教材中debounce的函式已經幫你寫好
function debounce(func, wait = 20, immediate = true) {
var timeout;
return function () {
var context = this, args = arguments;
var later = function () {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
}
window.scrollY：目前畫面上邊界的Y坐標值，越下面越大
window.innerHeight：目前畫面的長度
(element).offsetTop：該元素上邊界的Y坐標值
(element).height：該元素的長度
利用上面四個屬性，即可判斷圖片是否要滑入，實作是設定當圖片超過一半在畫面中才滑入。slideInAt是目前畫面下邊界的Y坐標，imageBottom是圖片下邊界的Y坐標，當slideInAt大於圖片上邊界+半張圖片長度時，isHalfShown為true。另外當往下滾動超過圖片時，圖片要變回隱藏，因此還要判斷有沒有滾超過，若畫面上邊界Y坐標小於圖片下邊界時，代表圖片還在畫面，isNotScrolledPast為true
const slideInAt = (window.scrollY + window.innerHeight);
const imageBottom = sliderImage.offsetTop + sliderImage.height;
const isHalfShown = slideInAt > sliderImage.offsetTop + sliderImage.height / 2;
const isNotScrolledPast = window.scrollY < imageBottom;
if (isHalfShown && isNotScrolledPast) {
sliderImage.classList.add(‘active’);
} else {
sliderImage.classList.remove(‘active’);
}
延伸閱讀
實作中，function debounce(func, wait = 20, immediate = true)參數帶入值代表預設，因此若要使用預設參數，只需debounce(func)這樣呼叫即可。若要改變參數就正常給參數，如debounce(func,100)。若只要給第三個參數就debounce(func,undefined,false)