日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

          Page1

編寫 CSS 樣式

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

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

里面每一個(gè)頁(yè)面元素的寬高都設(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)

接下來(lái)我們使用 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 屬性：

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)聽鼠標(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/??