如何通過CSS實現鼠標滾輪的橫向滾動效果？

css妙招：輕松實現鼠標滾輪橫向滾動

網頁設計中，我們常常需要鼠標滾輪實現橫向滾動，尤其是在水平方向排列內容較多的場景。默認情況下，滾輪通常控制縱向滾動，需要按住Shift鍵才能橫向滾動，這并不方便。雖然JavaScript可以監聽滾輪事件并控制橫向滾動條，但這種方法可能導致滾動不夠流暢。

本文介紹一種更優雅的方案：利用CSS樣式巧妙實現橫向滾動，無需JavaScript，滾動更流暢自然。

以往的JavaScript方法，例如：

function onscroll(event){   let left = -event.wheelDelta || event.deltaY / 2;   templateListRef.value.scrollLeft = templateListRef.value.scrollLeft + left; }

存在性能問題，體驗欠佳。

立即學習“前端免費學習筆記（深入）”；

我們的CSS解決方案的核心在于旋轉：

1. 旋轉容器： 將容器元素旋轉-90度，transform: rotate(-90deg);
2. 旋轉子元素： 將容器內的子元素旋轉90度，transform: rotate(90deg);

通過旋轉容器和子元素，巧妙地將鼠標的縱向滾動轉換為視覺上的橫向滾動。這種方法簡單直接，避免了JavaScript帶來的性能開銷，用戶體驗也更好。 無需監聽滾輪事件，滾動更加自然流暢。