「JavaScript 30」學習筆記（廿七）

「JavaScript 30」Study Notes
,

前言

本文為「JavaScript 30」教學影片的學習筆記。

目標

製作一個可拖曳移動的水平捲軸。

筆記

選取白色框。

1
const slider = document.querySelector('.items');

滑鼠是否按下。

1
let isDown = false;

滑鼠的 x 偏移量。

1
let startX;

水平捲軸的偏移量。

1
let scrollLeft;

監聽白色框，當發生 mousedown 事件時，觸發閉包。

1
2
3
4
5
6
7
8
9
10
slider.addEventListener('mousedown', (e) => {
    // 滑鼠是否按下的標記為 true
    isDown = true;
    // 增加 active 樣式
    slider.classList.add('active');
    // 滑鼠最初的 x 偏移量
    startX = e.pageX - slider.offsetLeft;
    // slider 滾動的 y 偏移量
    scrollLeft = slider.scrollLeft;
});

監聽白色框，當發生 mouseleave 事件時，觸發閉包。

1
2
3
4
5
6
slider.addEventListener('mouseleave', () => {
    // 滑鼠是否按下的標記為 false
    isDown = false;
    // 移除 active 樣式
    slider.classList.remove('active');
});

監聽白色框，當發生 mouseup 事件時，觸發閉包。

1
2
3
4
5
6
slider.addEventListener('mouseup', () => {
    // 滑鼠是否按下的標記為 false
    isDown = false;
    // 移除 active 樣式
    slider.classList.remove('active');
});

監聽白色框，當發生 mousemove 事件時，觸發閉包。

1
2
3
4
5
6
7
8
9
10
11
12
slider.addEventListener('mousemove', (e) => {
    // 如果滑鼠沒有發生 `mousedown` 事件就停止執行
    if (!isDown) return;
    // 避免觸發其他事件
    e.preventDefault();
    // 滑鼠當下的 x 偏移量
    const x = e.pageX - slider.offsetLeft;
    // 滑鼠移動的 x 偏移量，再乘上自訂的加倍移動的常數
    const walk = (x - startX) * 3;
    // 設定水平捲軸的偏移量
    slider.scrollLeft = scrollLeft - walk;
});