鼠标滚动事件，鼠标滚动一下，屏幕滑动一屏

思路：1.判断鼠标向上还是向下滚动
2.执行鼠标事件
鼠标滚动事件注册事件资料：https://www.cnblogs.com/wsoft/articles/2856861.html

 <!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><script type="text/javascript" src='https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js'></script><script type="text/javascript" src='jquery-1.11.3.js'></script><title>Document</title><style>.a {height: 1000px;width: 80%;margin: 0 auto;background: #6498e1;}.a2 {height: 1000px;width: 80%;margin: 0 auto;background: #bb7878;}</style>
</head><body><div class="a"></div><div class="a2"></div><div class="a"></div><div class="a2"></div><div class="a"></div><div class="a2"></div><script>var number = 0var gd = 0//  向下滚动还是向下滚动var scrollFunc = function (e) {gd = e.wheelDelta;}if (document.addEventListener) {document.addEventListener('DOMMouseScroll', scrollFunc, false);} //W3C  window.onmousewheel = document.onmousewheel = scrollFunc; //IE/Opera/Chrome/Safari  // scrop距离var isScrolling = false //是否在滚动listenAndScroll()// 无限滚动function listenAndScroll() {$(document).scroll(function () {//执行几千次var b = $(window).scrollTop();if (isScrolling) {return}//如果isScrolling为true就跳出去isScrolling = true//var scrollGap = 1000if (b > 0 && gd < 0) {let isBlock = b % scrollGap === 0 //%取余 余为零console.log(isBlock, b % scrollGap, b)if (isBlock) {return isScrolling = false//如果isBlock为true就跳出并isScrolling = false//跳出之后终止语句}let pos = (Math.floor(b / scrollGap) + 1) * scrollGapconsole.log(pos)$("html").animate({scrollTop: pos}, "slowly", function () {isScrolling = false;});}else if (b > 0 && gd > 0) {let isBlock2 = b % scrollGap === 0// console.log(b,isBlock2,scrollGap)if (isBlock2) return isScrolling = falselet pos2 = (Math.ceil(b / scrollGap) - 1) * scrollGapconsole.log(pos2)$("html").animate({scrollTop: pos2}, "slowly", function () {isScrolling = false});}else {isScrolling = false}})}</script>
</body></html>

鼠标滚动事件，鼠标滚动一下，屏幕滑动一屏相关推荐

python鼠标移动事件_给turtle屏幕增加鼠标移动事件核心代码
当鼠标移动时彩色方块会变色,标题栏会显示坐标值.以下是部分代码预览: """ 给turtle的屏幕增加鼠标移动事件. 本程序演示了如何给turtle.py模块增加鼠标移动 ...
html js鼠标悬停事件,鼠标悬停在轴标签d3.js javascript上的事件
有没有人知道是否有可能在y轴标签上有鼠标悬停事件? 例如,我在下面有一个散点图. y轴上的标签是"area1","area2"和"area3" ...
[html+js][实现鼠标悬停事件]鼠标移动到行自动变色实现
下面是一个示例HTML代码,它创建了一个带有5行3列的表格,并为每一行添加了鼠标事件,当鼠标移到行上时,该行背景颜色变成蓝色,移出时恢复原来的颜色: 其中,onmouseover 和 onmouseo ...
网页鼠标滚轮事件(滚滚屏)的获取及理解
问题?鼠标滚轮事件的获取及理解,俗称"滚滚屏"及案例下载下载地址:案例下载什么是鼠标滚轮事件呢? 传统的网页浏览形式,是通过滚动条进行浏览.而鼠标滚轮式浏览,是去除了滚动条而通 ...
JavaFX滚动事件
一.滚动事件 SCROLL 滚动 SCROLL_STARTED 滚动开始 SCROLL_FINISHED 滚动结束二.用法 node.setOnXX(event->{//do so ...
JavaFX鼠标移动事件
一.节点原鼠标移动事件 //鼠标进入node node.setOnMouseEntered(event->{//do something });//鼠标退出node node.setOnMous ...
页面滚动事件无效小记
在超过一个页面时会有返回顶部的需求,有时候会出现离奇的情况,就是明明页面滚动了好几页,但检测不到 srcoll 事件. 情况出在监听的元素内部元素高度超出该监听元素.特别需要提到的是,就算使用 win ...
tkinter滚动事件详解
引言在tkinter中,由<Mousewheel>提供绑定信息. 但是同其它绑定事件一样,滚动事件同样提供的event参数返回值,也拥有特殊的属性,比如send_event,delta, ...
Js之鼠标事件-鼠标事件
一 .常用到的鼠标事件类型事件 click 单机鼠标左键时发生,如果右键也按下则不会发生 dbclick 双击鼠标左键时发生,如果右键也按下则不会发生 mousedown 单击任意一个鼠标按钮时发 ...

鼠标滚动事件，鼠标滚动一下，屏幕滑动一屏

鼠标滚动事件，鼠标滚动一下，屏幕滑动一屏相关推荐

最新文章

热门文章