2 行 JS 程式碼實現頁面橫向滾動特效

2021-06-17 12:57:54

作者 | 峰華責編 | 夢依丹

出品 | 峰華的個人部落格

在前端這個無奇不有的世界裡，有些網站不是正常垂直滾動的，而是橫向滾動的：

那麼在沒法把滑鼠滾輪橫過來的前提下（蘋果除外），能否實現網頁橫向滾動呢？我們來寫程式碼試試。先看一下最終效果，這裡我用滑鼠的滾輪垂直滾動，頁面是橫向滾動的。

要實現這個功能，只需要一點點的 JS 程式碼。

編寫 HTML 結構

先看一下 HTML 結構，很簡單，就是三個模擬全屏頁面的 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 容器設定為 flex 佈局，並且顯示橫向滾動條：

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

裡面每一個頁面元素的寬高都設定為佔滿瀏覽器可視區域的 100%，並且在 flex 佈局中，不自動收縮，再分別給他們設定不同的背景色，用於區分：

.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%);}

實現橫向滾動

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

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

給它新增一個「wheel」事件，這個是監聽滑鼠滾輪的滾動，在滾動時，先阻止預設的滾動事件，然後讓容器水平橫向移動，這裡利用到了 scrollLeft 屬性，讓容器的內容向左移動，這裡只需要加上滾輪垂直滾動的距離差值就可以了，也就是 event 物件中的 deltaY 屬性：

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

相容性

wheel 事件的相容性可以參考 caniuse 提供的資料：

總結

這樣就實現橫向滾動了，重點是利用了「wheel」事件監聽滑鼠滾輪滾動，然後獲取滾動距離差值，把它加到可以滾動的容器的 scrollLeft 屬性中，你學會了嗎？

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

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

OPPO 40萬年薪招應屆生，狂攬晶片人才；惡意差評小米新手機，一使用者被判賠3萬元；谷歌開源全同態加密通用轉譯器|極客頭條
GitHub 標星 17 萬：打破程式設計師「中年危機」的「程式設計面試大學」！
Android 殺後臺太狠，谷歌：看不下去了，勢必要揪出「凶手」！

2 行 JS 程式碼實現頁面橫向滾動特效

相容性

總結

OPPO 40萬年薪招應屆生，狂攬晶片人才；惡意差評小米新手機，一使用者被判賠3萬元；谷歌開源全同態加密通用轉譯器|極客頭條

熱門文章