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

那么在沒法把鼠標滾輪橫過來的前提下（蘋果除外），能否實現(xiàn)網(wǎng)頁橫向滾動呢？我們來寫代碼試試。先看一下最終效果，這里我用鼠標的滾輪垂直滾動，頁面是橫向滾動的。

???

要實現(xiàn)這個功能，只需要一點點的 JS 代碼。

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

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

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

編寫 CSS 樣式

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

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

里面每一個頁面元素的寬高都設(shè)置為占滿瀏覽器可視區(qū)域的 100%，并且在 flex 布局中，不自動收縮，再分別給他們設(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%);  } 

實現(xiàn)橫向滾動

接下來我們使用 JS 實現(xiàn)橫向滾動，首先獲取 container 容器： 

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

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

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

兼容性

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

???

總結(jié)

這樣就實現(xiàn)橫向滾動了，重點是利用了 “wheel” 事件監(jiān)聽鼠標滾輪滾動，然后獲取滾動距離差值，把它加到可以滾動的容器的 scrollLeft 屬性中，你學會了嗎？

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

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