Click and Drag to Scroll


Posted by wayne201299 on 2023-10-04

拖動幻燈片

實作

  1. 監聽每個item被滑鼠點擊的相對位置,當滑鼠按著不放拖拉時,才會有幻燈片效果,以滑鼠第一次點擊item的位置作為出發點

     const slider = document.querySelector(".items");
     let isDown = false;
     let startX;
     let scrollLeft; // 左滑距離
    
     slider.addEventListener("mousedown", (e) => {
         isDown = true;
         slider.classList.add("active");
         startX = e.pageX - slider.offsetLeft;
         scrollLeft = slider.scrollLeft;
         e.preventDefault();
     });
    
  2. 監聽滑鼠移動、放開、離開事件,移動時需要不斷計算X軸距離

     slider.addEventListener("mouseup", (e) => {
         isDown = false;
         slider.classList.remove("active");
     });
    
     slider.addEventListener("mouseleave", (e) => {
         isDown = false;
         slider.classList.remove("active");
     });
    
     slider.addEventListener("mousemove", (e) => {
         if (!isDown) return;
         e.preventDefault();
         const x = e.pageX - slider.offsetLeft;
         const walk = (x - startX) * 3;
         slider.scrollLeft = scrollLeft - walk;
     });
    

知識點

  • preventDefault 是 JavaScript 中的一個事件方法,它用於取消事件的默認行為。當一個事件(如點擊、提交表單、按下按鈕等)觸發時,通常會伴隨著一些默認的行為。使用 preventDefault 方法可以阻止這些默認行為的發生,使你能夠完全控制事件的處理方式。
  • scrollLeft可以用來控制element的水平滾動距離

#javascript #css #html







Related Posts

每日心得筆記 2020-06-27(六)

每日心得筆記 2020-06-27(六)

ASP.NET Core Web API 入門教學 - 使用PATCH局部更新資料

ASP.NET Core Web API 入門教學 - 使用PATCH局部更新資料

Day 136

Day 136


Comments