两行JS代码实现页面横向滚动特效

          Page1

编写 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/​​

网页标题：两行JS代码实现页面横向滚动特效
文章分享：http://www.shufengxianlan.com/qtweb/news1/66151.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联