鼠标滚轮事件兼容性及鼠标滚轮事件案例

最新推荐文章于 2024-04-18 14:34:31 发布
最新推荐文章于 2024-04-18 14:34:31 发布
阅读量1.1k 收藏
点赞数
分类专栏： WEB前端 浏览器兼容问题 javascript / jQuery d3.js 文章标签： 鼠标滚轮事件兼容性 鼠标滚轮事件案例 event.wheelDelta event.detail 鼠标前滚后滚判断
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lyn1772671980/article/details/80053271
版权
鼠标滚轮事件在火狐、IE、谷歌浏览器的兼容性如下
        chrome & IE:
              滚轮事件：mousewheel
              后滚： d3.event.wheelDelta = -120（或者120的整数倍）          d3.event.detail = 0
              前滚： d3.event.wheelDelta = 120（或者120的整数倍）           d3.event.detail = 0
        firfox:
              滚轮事件：DOMMouseScroll
              后滚： d3.event.wheelDelta = undefined     d3.event.detail = 3（或者3的整数倍）

              前滚： d3.event.wheelDelta = undefined     d3.event.detail = -3（或者3的整数倍）

实现前滚后滚的案例如下：（注：此方式为d3.js实现的，不过原理相同，不熟悉d3.js的可以用jQuery替代实现或者用原生JS实现）

<!DOCTYPE html>
<html>
&l
最低0.47元/天 解锁文章
麦兜_冰夕
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Electron常见问题 20 - mac和window上的兼容性问题实例
liuzhen007的专栏
08-09 3237
目录 前言 正文 结尾 前言 最近重构electron项目工程，因为electron工程是跨平台的，所以一套代码能够支持windows，mac OS，linux三大系统，需要注意的就是代码细节上的一些兼容性问题。这也是我们选择electron方案不得不面临的问题。 正文 平台兼容性issue是electron中常见的问题之一，比如这次修改屏幕分享和窗口管理部分的代码时就遇到了一个这样的问题。 代码的重构工作是在mac系统上完成的，通过单元测试验证后，自己就将代码提交了。 这个时候从w.
JS鼠标滚轮水平滚动特效特效代码
03-20
在本案例中，"JS鼠标滚轮水平滚动特效"是指一种利用JavaScript实现的交互效果，允许用户通过鼠标的滚轮来实现网页内容的水平移动，而非常规的垂直滚动。这种效果在展示横向排列的内容时特别有用，例如产品列表、幻灯...
javascript 之滚轮事件
Eluckburlkmotion的博客
07-27 150
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box1{ width: 100px; height: 100px; background-color: red; } </style> <scr.
selenium进行滚轮滚动，并判断是否到底部
最新发布
knighthood2001
04-18 668
这段代码是使用 Selenium WebDriver 来自动模拟网页滚动的过程，并且在滚动到页面底部时停止。: 检查当前滚动条的位置与上一次滚动条位置是否相等，如果相等，说明页面已经滚动到底部了。通过这段代码，你可以模拟用户在浏览器中向下滚动页面的操作，并且在滚动到页面底部时停止。: 使用 JavaScript 获取当前滚动条距离页面顶部的距离，并将其保存在。: 打印当前滚动条距离页面顶部的距离，用于调试和观察滚动过程中的位置变化。这里的话，你可以直接使用我这的代码，去试试你那个网页是否能成功。
鼠标事件和滚轮事件实例
zfqzpp的专栏
05-05 2415
下面是鼠标和滚轮的一些基本的实例仅供参考，不足请大家多多指教： package demo; import java.awt.event.MouseEvent; import java.awt.event.MouseListener; import java.awt.event.MouseWheelEvent; import java.awt.event.MouseWheelListener;
鼠标滚轮事件及其兼容
neddiepeng的博客
11-14 414
鼠标滚轮事件：1，兼容火狐浏览器，在火狐浏览器中用到了addEventListener if(document.addEventListener){     document.addEventListener('DOMMouseScroll',scrollFunc,false); }      2,兼容ie 与 谷歌浏览器 if(document.attachEvent){
JS中兼容性写法举例
12-21 95
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> li { list-...
jQuery图片展示滑动div鼠标滚轮时间
01-06
在这个例子中，我们需要监听鼠标滚轮事件，对应的事件是`"mousewheel"`或者`"DOMMouseScroll"`，取决于浏览器兼容性。 **四、鼠标滚轮事件处理** 鼠标滚轮事件提供了判断用户向上或向下滚动的依据。通过比较事件...
OpenGL扩展包实现接收鼠标滚轮输入功能
04-06
在现代软件开发中，用户交互性是至关重要的，而鼠标滚轮输入作为常见的用户交互方式，能够提供更丰富的用户体验。本文将深入探讨如何使用OpenGL扩展包来实现接收鼠标滚轮输入的功能。 首先，OpenGL本身并不直接支持...
VB 使鼠标滚轮在编译器中可用
07-23
在这个案例中，它可能包含了实现鼠标滚轮在VB6 IDE中工作的特定函数和逻辑。 2. VBA Mouse Wheel Fix.reg：这是一个注册表脚本文件，通常用于修改Windows注册表设置。注册表是Windows系统存储配置信息的地方，包括...
jQuery实现鼠标滚轮控制的10多种圆形百分比进度条效果.zip
11-07
3. **事件绑定**：jQuery的`.on()`方法用于绑定事件处理函数，如在本案例中的鼠标滚轮事件`mousewheel`。当用户滚动鼠标时，相应的函数将被调用。 4. **自定义事件**：在项目中可能需要创建并触发自定义事件，以在...
js滚轮事件 自定义滚动条的实现
11-21
本文实例为大家分享了js自定义滚动条的实现的具体代码，供大家参考，具体内容如下 描述： 自定义滚动条的实现 效果： 实现： <!DOCTYPE html> <html lang=""> <head> <meta charset="utf-8"> <title></title> <style> * {margin: 0;padding: 0;} html,body { width: 100%;height: 100%;} #box { width: 100%; height: 100%; overflow: hidden;} /*一个个划过去的页面
两种js监听滚轮事件的实现方法
11-23
前段时间在写前端的时候，需要监听浏览器的滚轮事件 网上查了一下，找到两种监听滚轮事件的方法： 一、原生js通过[removed]监听 //[removed] = function() {//为了保证兼容性，这里取两个值，哪个有值取哪一个　　var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; 　　//scrollTop就是触发滚轮事件时滚轮的高度 } 二、Jquery通过$(window).scroll()监听 $(window).scroll(functio
关于滚轮事件的两个案例与相关知识点
weixin_43221240的博客
01-09 241
var navH = $("#tab").offset().top; $(window).scroll(function(){ //获取滚动条的滑动距离 scroH = $(this).scrollTop(); // console.log(scroH); //滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离，就固定，反之就...
滚轮事件兼容问题js
清新de菜的博客
06-25 92
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do.
浏览器兼容性问题：典例
zlq_CSDN的博客
04-01 312
/* * 首先来判断各大浏览器的类型 */ function getOs() { var OsObject = ""; if (isIE = navigator.userAgent.indexOf("MSIE") != -1) { return "MSIE"; } if (isFirefox = navigator.userAgent.index...
鼠标滚轮事件，解决兼容浏览器
weixin_46002223的博客
02-27 248
鼠标滚轮事件，解决兼容浏览器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /&g
HTML5学习_day10(4)--兼容性个例
woaiwanshumen的博客
10-11 341
兼容性个例 1.并一行的元素，第一个元素没有设置浮动，第二个元素设置了向左浮动。在IE6,7下连两个元素之间会多出3px的空隙。 解决办法：如果一行有一个元素设置了浮动，那么给ital元素都设置浮动就可以消除空隙。 2.并列一行元素，第一个元素没有设置浮动，第二个元素向右浮动，那么在IE6,7下，第二个元素会折行显示。 3.块属性标签设置浮动，并且有水平方向的margin值，水
滚轮事件以及兼容性问题
407指导员
11-17 184
滚轮事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>滚轮事件</title> <style> #box1 { width: 100px; height: 100px; background-color: red;
Qwidget 鼠标滚轮事件
05-31
当用户在 QWidget 上使用鼠标滚轮时，该控件会发出鼠标滚轮事件信号，我们可以通过重载 QWidget 的 wheelEvent() 函数来处理这些事件。示例代码如下： ``` void MyWidget::wheelEvent(QWheelEvent *event) { if ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

麦兜_冰夕

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

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

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

打赏作者

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

抵扣说明：

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

余额充值