如何通過CSS技巧讓鼠標滾輪默認實現橫向滾動？

巧用css，輕松實現鼠標滾輪橫向滾動

在處理水平列表時，用戶通常希望能夠直接使用鼠標滾輪進行橫向滾動，而無需額外操作。本文將介紹一種高效的CSS技巧，讓您輕松實現這一目標，提升用戶體驗。

傳統方法的局限性

面對水平列表，默認的鼠標滾輪操作只能實現垂直滾動。雖然可以通過JavaScript監聽滾輪事件并手動調整水平滾動條位置來實現橫向滾動，但這種方法往往導致滾動不夠流暢，影響用戶體驗。

以下是一個JavaScript示例，其效果并不理想：

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

CSS旋轉變換：優雅的解決方案

為了獲得更流暢、更自然的橫向滾動效果，我們可以巧妙地運用CSS的旋轉變換功能。

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

具體步驟如下：

1. 旋轉容器： 將包含水平列表的容器元素旋轉-90度。
2. 旋轉子元素： 將容器內的子元素（即列表項）旋轉90度，以校正視覺方向。

通過以上操作，原本的垂直滾動便轉化為水平滾動。以下是實現這一效果的CSS代碼：

.container {   transform: rotate(-90deg);   transform-origin: right top; }  .container > * {   transform: rotate(90deg);   transform-origin: right top; }

transform-origin: right top; 屬性確保旋轉圍繞容器的右上角進行，從而保持元素的正確位置。

這種CSS技巧利用了變換屬性來巧妙地改變元素的顯示方向，從而間接地改變了滾動的方向，為用戶提供更直觀、更便捷的交互體驗。 這種方法不僅解決了問題，也提供了一種解決界面交互難題的新思路。