實現 div 元素內容超出可通過滾輪上下滑動從而使元素橫向滾動

移動端中的元素內容超出時，對容器設置overflow-x: auto就可以通過手勢水平移動。但是 PC 端只能通過滑鼠滾輪上下滑動，而不能水平移動。

只需要給元素添加一個監聽滑鼠滾輪事件，上下滑動時修改其 scrollLeft 屬性值就可以實現。直接貼上代碼：

<div class="horizontal-slip-el">
  <div class="child-el">首頁</div>
  <div class="child-el">日記</div>
  <div class="child-el">隨筆</div>
  <div class="child-el">標簽</div>
  <div class="child-el">管理</div>
  <div class="child-el">說說</div>
</div>

.horizontal-slip-el {
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-content: center;
  flex-direction: row;
  flex-wrap: nowrap;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  width: 300px;
  padding: 10px;
}

.child-el {
  padding: 10px;
  margin: 0 10px;
  width: 80px;
  border-radius: 6px;
  border: 1px solid #cccccc;
}

$(".horizontal-slip-el").on("mousewheel", e => {
  let scrollLeft = e.delegateTarget.scrollLeft;
  let scrollWidth = e.delegateTarget.scrollWidth - e.delegateTarget.offsetWidth;
  if (e.originalEvent.deltaY < 0) {
    if (scrollLeft >= 0) {
      scrollLeft -= 20;
      $(e.delegateTarget).animate({ scrollLeft }, 40, "linear");
    }
  } else {
    if (scrollLeft <= scrollWidth) {
      scrollLeft += 20;
      $(e.delegateTarget).animate({ scrollLeft }, 40, "linear");
    }
  }
});

最主要的就是獲得滑鼠滾輪事件中的 delegateTarget 對象和 originalEvent 對象。delegateTarget 就是觸發滾動事件的元素。元素不溢出的寬度是 scrollWidth，溢出的內容的寬度是 scrollLeft。scrollWidth - scrollLeft = maxWidth，maxWdith 就是最多只能把 scrollLeft +=到 maxWidth。

originalEvent 有一些屬性可以判斷滾輪到底是朝著哪個方向滑動。其中 deltaY 小於 0 代表朝上滑動，反之朝下滑動。