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

时间：2023-03-16 23:17:21 科技观察

在前端的世界里，有的网站不是正常纵向滚动，而是横向滚动。那么，在不能水平转动鼠标滚轮的前提下（苹果除外），能否实现网页的水平滚动呢？让我们尝试编写代码。我们先来看看最终的效果。这里我用鼠标滚轮垂直滚动，页面水平滚动。实现这个功能，只需要一点点JS代码。写HTML结构先看HTML结构，很简单，就是三个模拟全屏页面的div，class为page，然后放在一个div容器中，类名container：

Page1

Page2

Page3

写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实现横向滚动olling，首先获取container容器：letcontainer=document.querySelector(".container");给它添加一个“wheel”事件，这个是监听鼠标滚轮的滚动。滚动的时候，先阻止默认的滚动事件，然后让容器横向横向移动。在这里，scrollLeft属性用于将容器的内容向左移动。这里只需要增加滚轮的垂直滚动距离即可。区别就够了，就是event对象中的deltaY属性：container.addEventListener("wheel",(event)=>{event.preventDefault();container.scrollLeft+=event.deltaY;});兼容性滚轮事件的兼容性可以参考caniuse提供的资料：总结这样就实现了水平滚动。重点是利用“wheel”事件监听鼠标滚轮的滚动，然后获取滚动的距离差，添加到可滚动容器的scrollLeft属性中，学会了吗？源码地址：https://github.com/zxuqian/html-css-examples/tree/master/38-horizo??ntal-scrolling原文地址：https://zxuqian.cn/docs/videos/effects/js-horizo??ntal-scroll-影响/

上一篇：如何从深度嵌套的JSON中快速找到特定的Key

下一篇：5G云游戏优势及技术分析

两行JS代码实现页面横向滚动的特效相关文章