如何控制滚轮横向滑动(原生JS实现方法)
控制滚轮横向滑动
提示：这个是以前讨论的时候遇到的情况 ; 回头想了一下应用场景确实挺多的,.所以今天趁周末大致的记录一下如何通过js去实现【横向滚动】
文章目录
- 控制滚轮横向滑动
- 解决思路如下
- `1.如何在页面中展示横向滚动条`
- `2.如何获取鼠标的【滚动轮】`
- `3.通过什么Api去实现滚动效果 `
- 一、如何创建横向滚动条
- 1.代码如下(HTML和CSS)
- 2.效果如下图所示:
- 二、鼠标滚动轮事件(mousewheel和wheel事件)
- 1.wheel鼠标滚轮(完美支持所有浏览器)
- JS代码如下所示:
- `*&*需要注意的事项(wheel滚动方向)*&*`:
- 2.mousewheel支持该鼠标事件的浏览器如下(生产环境不可使用,应该使用wheel)
- 测试效果图如下
- 起始位置如下
- 移动后的位置如下
- 总结
- 祝愿看到文章的个位,每天心情舒畅,快快乐乐的工作!!!! 大家的三连就是对我的最大鼓励!!! 谢谢
解决思路如下
1.如何在页面中展示横向滚动条
2.如何获取鼠标的【滚动轮】
3.通过什么Api去实现滚动效果
一、如何创建横向滚动条
1.代码如下(HTML和CSS)
<style>div {overflow-x: auto;}</style><div><p style="width: 200%; height: 400px; background-color: antiquewhite"><pre>123 <mark>12313123132</mark> 78979879897</pre></p></div>2.效果如下图所示:
二、鼠标滚动轮事件(mousewheel和wheel事件)
1.wheel鼠标滚轮(完美支持所有浏览器)
JS代码如下所示:
let div = document.querySelector("div");div.addEventListener("wheel", function (e) {//这里使用的是 chrom浏览器测试的,有一些Api不太准确 ,请大家注意!!!!let left = -e.wheelDelta || e.deltaY / 2;console.log('wheelDelta:',-e.wheelDelta,"deltaY :" , e.deltaY);div.scrollLeft = div.scrollLeft + left;});
*&*需要注意的事项(wheel滚动方向)*&*:
请勿想当然依据滚轮方向（即该事件的各 delta 属性值）来推断文档内容的滚动方向，要获取文档内容的滚动方向，可在文档内容滚动事件（scroll (en-US)）中监视scrollLeft和scrollTop二值变化情况，即可推断出滚动方向了。
2.mousewheel支持该鼠标事件的浏览器如下(生产环境不可使用,应该使用wheel)
测试效果图如下
起始位置如下
移动后的位置如下
总结
Inshow: 这次的总结还是学到了很多知识点的,同时希望文章可以帮助到大家
MDN
祝愿看到文章的个位,每天心情舒畅,快快乐乐的工作!!! 大家的三连就是对我的最大鼓励!!! 谢谢
如何控制滚轮横向滑动(原生JS实现方法)相关推荐
- html5 图片横向滑动效果,JS实现图片横向滚动效果示例代码
图片横向滚动代码 .box{ margin:0 auto; height:70px; width:810px; padding:10px; border:1px solid #FF0000; } .b ...
- js控制鼠标移动_原生JS封装可拖拽效果
项目代码已上传码云:小朋友/JavaScript 封装可拖拽特效 访问该URL可查看效果:http://is666a.gitee.io/javascript_drag/ https://www.zhi ...
- ie下的placeholder原生js实现方法
2019独角兽企业重金招聘Python工程师标准>>> css代码 *{margin: 0;padding: 0;}body{*text-align: center;}/*登陆表单* ...
- 创建原生JS insertafter()方法实现
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 < ...
- 自己封装的一个原生JS拖动方法。
代码: 1 function drag(t,p){ 2 3 var point = p || null, 4 target = t || null, 5 resultX = 0, 6 resultY ...
- 原生js和jquery 遍历数组区别（forEach和each区别）
原生js和jquery 遍历数组区别(forEach和each区别) <script>var arr=[1,3,6,8,4];var obj={0:1,1:3,2:6,3:8,4:4};a ...
- js控制div内部滚动内容横向滑动位置
js控制div内部滚动内容横向滑动位置 使用 js控制div内部的滚动内容横向滑动,主要应用在移动端,项目是基于angularJS,所以带有angular的点击方法ng-click,可以用原生js替换 ...
- php滚动窗口多条动态,详解原生JS是实现控制多个滚动条同步跟随滚动
本文主要和大家详解详解原生JS是实现控制多个滚动条同步跟随滚动,当这两个容器元素的内容都超出了容器高度,即都出现了滚动框的时候,如何在其中一个容器元素滚动时,让另外一个元素也随之滚动. 在一些支持用 ...
- android 横向滚动 导航,仿今日头条横向滚动导航栏--原生js
咳咳!先打一波小广告,在上一篇里忘记了,那啥--我的那个个人博客做好了-->(我的博客) 好嘞,言归正传,说说我们的效果. 其实就是实现横向滑动,进行选择. 原理: 鼠标按下,获取当前鼠标坐标, ...
最新文章
- zabbix 实践 （一）
- Windows RT复活！Windows 10 Cloud首波截图曝光
- C++ Primer 5th笔记（chap 16 模板和泛型编程）包扩展
- 2 Redis基本知识
- PowerBI随笔(7)-lookupvalue、divide
- 从Java新手到大神需要学哪些知识？
- html action不起作用,Html.ActionLink做为按钮或图像，而不是连接
- 电容屏物体识别_相比传统的触摸屏，电容式触摸屏的优势
- android睡眠伴侣,GitHub - HuangZengPei/Sleepmon: 我的Android团队项目，一款可以监测、统计睡眠质量情况的睡眠健康伴侣应用。...
- HTML设置网页小图标
- 相控阵天线有源驻波测试
- 安装Office InfoPath 2007
- 华字后面配什么字比较好_和华字搭配的男孩名字 华后面取什么名字男孩 带华字好听好寓意男孩名...
- 【新书推荐】【2019】基于Kronecker积波束形成的阵列处理
- 电子学会2020年9月青少年软件编程（图形化）等级考试试卷（一级）答案解析
- lt;江山美人gt;为何淡季赢得高票房
- Sublime Text 4.0 4084 汉化版 — 代码编辑器
- 浮世三千，吾爱有三。日，月与卿。日为朝，月为暮，卿为朝朝暮暮。...
- tkMapper的基本使用
- 国家高新技术企业，哪些情况将被取消资格？