Slide In on Scroll


Posted by wayne201299 on 2023-09-28

  • 延遲載入圖片,當滾輪滾到頁面時再做載入
  • 滑到圖片一半時,圖片會由左右兩側滑入
  • 當滑到圖片底部,圖片會向左右滑出

實作

  1. 選擇所有image element,並在window上監聽滾輪事件

    const sliderImages = document.querySelectorAll('.slide-in');
    function checkSlide(e) {
    console.log(e)
    }
    window.addEventListener('scroll', checkSlide);
    

    可以看到log出非常多監聽結果,這也間接影響到效能,所以我們必須要做debounce,過一段時間再回傳監聽結果

  2. 設定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);
       };
     }
    
  3. 取得每張圖片要滑入的高度
    取得目前滾輪滾了多少再加上當前視窗高度,就是目前視窗最底到document頂部的距離,另外因為要在滑到半張圖片時做滑入,所以要再扣除半張圖片高度

    const slideInAt = (window.scrollY + window.innerHeight) - sliderImage.height / 2;
    
  4. 取得每張圖片要滑出的高度

     const imageBottom = sliderImage.offsetTop + sliderImage.height;
    
  5. 滑入的時機點必須在目前視窗底部介於圖片的一半與圖片底部之間,離開底部後將圖片滑出

     const isHalfShown = slideInAt > sliderImage.offsetTop;
     const isNotScrolledPast = window.scrollY < imageBottom;
    
     if (isHalfShown && isNotScrolledPast) {
       sliderImage.classList.add('active');
     } else {
       sliderImage.classList.remove('active');
     }
    

知識點

  • window.scrollY,JavaScript中獲取在瀏覽器中Y軸已滾動的距離
  • window.innerHeight JavaScript中獲取目前瀏覽器可視窗口的內部高度(viewport)

Debounce

在 JavaScript 中,debounce 是一個常用的技巧,它的主要功用是控制連續觸發的事件或函數執行頻率,以減少不必要的執行次數,提高性能和優化用戶體驗。

Debounce 的作用可以簡單描述如下:

  • 延遲執行:Debounce 會等待某個事件在特定時間內不再觸發,然後才執行相關的操作。這個時間間隔稱為 debounce 時間。
  • 過濾重複事件:當事件在 debounce 時間內連續觸發,debounce 會忽略這些連續事件,只執行最後一次觸發的操作。這避免了不必要的重複處理。

Debounce 常見的應用場景包括:

  • 搜索欄實時搜索:當用戶輸入搜索關鍵詞時,使用 debounce 可以避免在每個鍵盤敲擊時都觸發搜索請求,而是等待用戶停止輸入一小段時間後才執行實際的搜索。
  • 窗口大小調整事件:當用戶調整瀏覽器窗口大小時,使用 debounce 可以確保只在用戶停止調整窗口大小時執行相關的調整佈局操作。
  • 滾動事件:當用戶滾動網頁時,使用 debounce 可以減少處理滾動事件的頻率,以提高性能。

以下是一個簡單的 JavaScript 範例,演示了如何實現 debounce:

function debounce(func, delay) {
  let timerId;

  return function () {
    const context = this;
    const args = arguments;

    clearTimeout(timerId);
    timerId = setTimeout(function () {
      func.apply(context, args);
    }, delay);
  };
}

// 使用 debounce 來包裝一個函數,延遲執行至少 300 毫秒
const debouncedSearch = debounce(function () {
  // 執行搜索操作
  console.log("Searching...");
}, 300);

// 綁定事件處理函數,當用戶輸入時觸發 debounce
document.getElementById("search-input").addEventListener("input", debouncedSearch);

在這個示例中,debounce 函數接受一個函數 func 和一個延遲時間 delay,並返回一個新的函數。這個新的函數將在觸發時延遲 delay 毫秒,如果在這段時間內連續觸發,則會重置計時器,直到不再觸發事件,然後執行 func。這樣可以確保 func 只在用戶停止輸入或操作一段時間後才執行。


#javascript #css #html







Related Posts

關於重新導向的 status code

關於重新導向的 status code

Day 107

Day 107

【隨堂筆記】Python 資料處理

【隨堂筆記】Python 資料處理


Comments