在前端這個(gè)無(wú)奇不有的世界里，有些網(wǎng)站不是正常垂直滾動(dòng)的，而是橫向滾動(dòng)的。

那么在沒(méi)法把鼠標(biāo)滾輪橫過(guò)來(lái)的前提下（蘋(píng)果除外），能否實(shí)現(xiàn)網(wǎng)頁(yè)橫向滾動(dòng)呢？我們來(lái)寫(xiě)代碼試試。先看一下最終效果，這里我用鼠標(biāo)的滾輪垂直滾動(dòng)，頁(yè)面是橫向滾動(dòng)的。

???

要實(shí)現(xiàn)這個(gè)功能，只需要一點(diǎn)點(diǎn)的 JS 代碼。

編寫(xiě) HTML 結(jié)構(gòu)

先看一下 HTML 結(jié)構(gòu)，很簡(jiǎn)單，就是三個(gè)模擬全屏頁(yè)面的 div，class 都是 page，然后放在一個(gè) class 名為 container 的 div 容器中： 

<main>    <div class="container">      <div class="page">Page1</div>      <div class="page">Page2</div>      <div class="page">Page3</div>    </div>  </main> 

編寫(xiě) CSS 樣式

對(duì)于樣式，container 容器設(shè)置為 flex 布局，并且顯示橫向滾動(dòng)條： 

.container {    display: flex;    overflow-x: scroll;  } 

里面每一個(gè)頁(yè)面元素的寬高都設(shè)置為占滿(mǎn)瀏覽器可視區(qū)域的 100%，并且在 flex 布局中，不自動(dòng)收縮，再分別給他們?cè)O(shè)置不同的背景色，用于區(qū)分： 

.page {    width: 100vw;    height: 100vh;    flex-shrink: 0;  }  .page:nth-child(1) {    background: hsl(140deg, 50%, 50%);  }  .page:nth-child(2) {    background: hsl(210deg, 50%, 50%);  }  .page:nth-child(3) {    background: hsl(270deg, 50%, 50%);  } 

實(shí)現(xiàn)橫向滾動(dòng)

接下來(lái)我們使用 JS 實(shí)現(xiàn)橫向滾動(dòng)，首先獲取 container 容器： 

let container = document.querySelector(".container"); 

給它添加一個(gè) “wheel” 事件，這個(gè)是監(jiān)聽(tīng)鼠標(biāo)滾輪的滾動(dòng)，在滾動(dòng)時(shí)，先阻止默認(rèn)的滾動(dòng)事件，然后讓容器水平橫向移動(dòng)，這里利用到了 scrollLeft 屬性，讓容器的內(nèi)容向左移動(dòng)，這里只需要加上滾輪垂直滾動(dòng)的距離差值就可以了，也就是 event 對(duì)象中的 deltaY 屬性： 

container.addEventListener("wheel", (event) => {    event.preventDefault();    container.scrollLeft += event.deltaY;  }); 

兼容性

wheel 事件的兼容性可以參考 caniuse 提供的數(shù)據(jù)：

???

總結(jié)

這樣就實(shí)現(xiàn)橫向滾動(dòng)了，重點(diǎn)是利用了 “wheel” 事件監(jiān)聽(tīng)鼠標(biāo)滾輪滾動(dòng)，然后獲取滾動(dòng)距離差值，把它加到可以滾動(dòng)的容器的 scrollLeft 屬性中，你學(xué)會(huì)了嗎？

源碼地址：??https://github.com/zxuqian/html-css-examples/tree/master/38-horizontal-scrolling??

原文地址：??https://zxuqian.cn/docs/videos/effects/js-horizontal-scroll-effect/??