作者|烽火責(zé)任篇|夢(mèng)義團(tuán)

制作|烽火的個(gè)人博客

在前端不可思議的世界里，有些網(wǎng)站水平滾動(dòng)，而不是正常的垂直滾動(dòng)。

那么，在不能橫過鼠標(biāo)滾輪的前提下(蘋果除外)，是否可以橫向滾動(dòng)主頁？我來寫代碼。

先看一下最終效果，這里我用鼠標(biāo)的滾輪垂直滾動(dòng)，頁面是橫向滾動(dòng)的。

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

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

先看一下 HTML 結(jié)構(gòu)，很簡(jiǎn)單，就是三個(gè)模擬全屏頁面的 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>

編寫 CSS 樣式

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

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

里面每一個(gè)頁面元素的寬高都設(shè)置為占滿瀏覽器可視區(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)

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

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

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

con("wheel", (event) => { event.preventDefault; con += event.deltaY;});

兼容性

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

總結(jié)

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

源碼地址：

原文地址：