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

最新推荐文章于 2024-07-26 11:22:40 发布
最新推荐文章于 2024-07-26 11:22:40 发布
阅读量6.3k 收藏 43
点赞数 16
分类专栏： 前端 文章标签： css html web js html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fengqiuzhihua/article/details/117927767
版权
本文介绍了如何使用少量JS代码实现网页横向滚动效果。通过监听“wheel”事件，结合CSS布局，使得页面在鼠标滚轮滚动时水平移动。提供了完整的HTML结构、CSS样式和JS实现代码，适用于前端开发者学习。
摘要由CSDN通过智能技术生成

在前端这个无奇不有的世界里，有些网站不是正常垂直滚动的，而是横向滚动的：

横向网站示例
那么在没法把鼠标滚轮横过来的前提下（苹果除外），能否实现网页横向滚动呢？我们来写代码试试。先看一下最终效果，这里我用鼠标的滚轮垂直滚动，页面是横向滚动的。

横向滚动最终效果
要实现这个功能，只需要一点点的 JS 代码。

编写 HTML 结构

先看一下 HTML 结构，很简单，就是三个模拟全屏页面的 div，class 都是 page，然后放在一个 class 名为 container 的 div 容器中：

<main>
  <div class="container">
    <div class="page">Page1</div>
最低0.47元/天 解锁文章
峰华前端工程师
关注
专栏目录
js文字横向滚动特效
10-23
在本文中，我们详细探讨了使用JavaScript实现文字横向滚动特效的方法。这种特效可以在网页上创建出一种平滑滚动的视觉效果，使得文字能够在指定的区域中横向滚动显示，无间隙循环播放。通过阅读本文，读者将能够理解...
分享 10个简单实用的 JS 代码技巧
欢迎光临
07-05 614
我们经常需要这样做，在手机上显示 A 逻辑，在 PC 上显示 B 逻辑。基本上，设备类型是通过识别浏览器的userAgent来确定的。有时候我们需要将元素滚动到可见区域，怎么办？除了区分是手机端还是PC端，很多时候我们还需要区分当前设备是Android还是IOS。你一定遇到过这样的场景，需要全屏播放视频，在浏览器中全屏打开页面。是的，这个和第4点一起使用，你也会有退出浏览器全屏状态的场景。当然，如果知道文档的高度，也可以平滑滚动到页面底部。需要一种适用于所有平台的防止事件冒泡的方法。
javascript 实现图片横向滚动
04-09
这是网站里常用的技术，可以作为模板使用，使本人自己设计，页面部分完全采用div块实现，可以作为标准模板，后面附有注释，结合了专业的css技术与javascript技术
【日常记录】【JS】Web浏览器滚动方案，Window：scrollTo()、Window：scrollBy()、Element.scrollIntoView() 三种方案
最新发布
呆呆狗
07-26 635
Web浏览器滚动方案，Window：scrollTo()、Window：scrollBy()、Element.scrollIntoView() 三种方案
记录：js制作简单的横向拖拽滚动
weixin_42106302的博客
09-06 542
今天突然接到一个业务，要实现横向拖拽滚动，废话不多说直接上代码。记录一下以免以后遇到相同需求。
页面内容横向滚动
yinmanman_dev的博客
03-13 356
页面内容横向滚动
JS模仿横向滚动条
10-29
JS模仿横向滚动条
如何控制滚轮横向滑动(原生JS实现方法)
weixin_46022934的博客
10-22 8136
控制滚轮横向滑动 解决思路如下 `1.如何在页面中展示横向滚动条` `2.如何获取鼠标的【滚动轮】` `3.通过什么Api去实现滚动效果 ` 一、如何创建横向滚动条 1.代码如下(HTML和CSS) 2.效果如下图所示: 二、鼠标滚动轮事件(mousewheel和wheel事件) 1.wheel鼠标滚轮(完美支持所有浏览器) JS代码如下所示: `*&*需要注意的事项(wheel滚动方向)*&*`: 2.mousewheel支持该鼠标事件的浏览器如下(生产环境不可使用,应该使用wheel) 测试效果图如下
JS实现图片横向滚动效果示例代码
10-26
从提供的文件内容来看，本文通过一个具体的示例，向读者展示了如何利用JavaScript（简称JS）来实现图片的横向滚动效果。下面，我们将详细探讨该示例中所包含的知识点。 ### HTML结构 首先，示例中的HTML结构使用了...
jQuery文字横向滚动效果的实现代码
10-22
通过使用jQuery，开发者能够以更少的代码实现更加复杂的网页特效。接下来，我们将通过具体的实现代码来探讨如何用jQuery来创建一个文字横向滚动的动画效果。 在给定的文件内容中，我们看到了两个不同的实现方法，...
JS实现分页浏览横向图片(类轮播)实例代码
11-29
昨天朋友问我怎么用js实现分页浏览横向图片功能，其实实现代码很简单的，下面小编给大家带来了具体实现代码，代码如下所示： common.js function $(id) { return document.getElementById(id); } function $_tag(tag) { return document.getElementsByTagName(tag); } index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <s
向左滚动-完整DIV+CSS+JS不间断横向滚动代码
11-09
向左滚动-完整DIV+CSS+JS不间断横向滚动代码 欧耶
js辅助添加横向滚动条
E-小伍的博客
03-28 1945
记录工作中很实用的html布局时能应用到的小技巧！ 背景提要：在一块小的布局中，需要有一个横向滚动条，但当你在css中键入overflow-x:auto之后；由于当div或其他标签没有设定固定宽，而导致overflow-x:auto失效；所以我用一个小的JS辅助解决。 javascript代码 function window_onload(){ var Div=docum
Web实现：页面横向滚动
jasmyn518的博客
04-16 1519
实现效果：根据页面宽度，当页面宽度超出内容时，页面禁止横向滚动，页面宽度小于内容时，页面横向滚动。根据页面的不同宽度，字体大小也会相应变化。 HTML部分： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
前端：横向滚动条，拖动进行左右滚动（含隐藏滚动条）
weixin_46001736的博客
08-29 1514
前端：横向滚动条，拖动进行左右滚动（含隐藏滚动条）
两行js代码实现页面横向滚动
热爱编程 热爱生活
10-16 630
1.HTML代码: <main> <div class="container"> <div class="page">Page1</div> <div class="page">Page2</div> <div class="page">Page3</div> </div> </main> 2.JS代码: deltaY:鼠标滚轮往上移动，de...
页面出现横向滚动条的原因
Igiveufireworks的博客
10-17 1312
设置页面body宽度和背景图div宽度的时候使用百分比%设置页面宽度，用vh和vw设置背景图宽度，本来应该都是占满整个屏幕，但是发现页面出现了横向滚动条。100vw比页面正好多出来一个滚动条的宽度。vw计算的是整个视口的宽度，包括滚动条。百分比计算宽度的后会不包括滚动条。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

峰华前端工程师

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值