[淺談] 點擊讓 X 軸移動 — JavaScript

#scrollLeft

JavaScript

在正式開始前，我想先來分享一個最近很常聽到的東西，通常很多人會建議面試回答問題時，可以用ＳＴＡＲ的方式來回答，會比較有條理，面試官也會覺得言之有物。

那ＳＴＡＲ分別代表什麼呢？
Ｓ－Situation 情境
Ｔ－Task 任務
Ａ－Action 行動
Ｒ－Result 結果

在舉例自己的過往經歷時，可以帶出該事件的「情境、你被指派的任務、你做了什麼、結果是什麼」，不但有頭有尾，聽者也比較可以去想像。看起來好像很簡單，不過要講得好也是很有學問的！

那本篇文就會以這個模式來練習看看

Ｓ－專案需求復刻出 Podcast 平台
Ｔ－實作與官網相同的功能－透過點擊左右鍵，讓指定區域 X 軸左右移動
Ａ－上網搜尋 MDN、StackOverflow
Ｒ－成功寫出點擊事件可移動的功能，也順勢學到讓移動更滑順的方法

那要如何完成這樣的功能呢？
１．移動 X 軸－scrollLeft

我們在按鈕下了點擊的監聽事件之後，就可以這麼寫
document.getElementById('container').scrollLeft += 20

點下去 X 軸就會往右移動 20px；
相反的如果要往左移動，改寫成 -=20 就可以了

２．捲軸移動更流暢－則是透過 CSS 加上 scroll-behavior: smooth
捲動時就會比較順囉！