兩行JS代碼實現(xiàn)頁面橫向滾動特效
在前端這個無奇不有的世界里，有些網(wǎng)站不是正常垂直滾動的，而是橫向滾動的。
成都創(chuàng)新互聯(lián)公司專業(yè)為企業(yè)提供盤錦網(wǎng)站建設、盤錦做網(wǎng)站、盤錦網(wǎng)站設計、盤錦網(wǎng)站制作等企業(yè)網(wǎng)站建設、網(wǎng)頁設計與制作、盤錦企業(yè)網(wǎng)站模板建站服務，10余年盤錦做網(wǎng)站經(jīng)驗，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡服務。
那么在沒法把鼠標滾輪橫過來的前提下（蘋果除外），能否實現(xiàn)網(wǎng)頁橫向滾動呢？我們來寫代碼試試。先看一下最終效果，這里我用鼠標的滾輪垂直滾動，頁面是橫向滾動的。
???
要實現(xiàn)這個功能，只需要一點點的 JS 代碼。
編寫 HTML 結構
先看一下 HTML 結構，很簡單，就是三個模擬全屏頁面的 div，class 都是 page，然后放在一個 class 名為 container 的 div 容器中：
Page1
Page2 Page3 編寫 CSS 樣式
對于樣式，container 容器設置為 flex 布局，并且顯示橫向滾動條：
.container { display: flex; overflow-x: scroll; }
里面每一個頁面元素的寬高都設置為占滿瀏覽器可視區(qū)域的 100%，并且在 flex 布局中，不自動收縮，再分別給他們設置不同的背景色，用于區(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ù)：
???
總結
這樣就實現(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/??
分享文章：兩行JS代碼實現(xiàn)頁面橫向滾動特效
URL網(wǎng)址：
http://uogjgqi.cn/article/codddos.html
