Click and Drag to Scroll

拖動幻燈片

實作

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的水平滾動距離