精华内容
下载资源
问答
我要提问
  • 鼠标滚轮滚动事件wheel
    千次阅读
    2020-05-31 16:05:22

    鼠标得滚动事件wheel

    鼠标的滚轮事件主要有两种:

    • onmousewheel（firefox不支持）
    • DOMMouseScroll（只有firefox支持）

    wheel 的事件对象得属性：

    deltaY、detail、wheelDelta ,deltaMode detail

    deltaX，鼠标滚轮左右摆动，本属性是只读的。 负值，向左；正值，向右。（正负方向，跟系统的x坐标保持一致。）
    deltaY，鼠标滚轮上下滚动，只读。负值，向上；正值，向下。
    deltaMode，属性返回一个数字，表示滚动值 （deltaX，deltaY，deltaZ） 的长度单位。
    wheelDelta, 属性返回一个数字 正数表示向上滚动 ,负数表示向下滚动
    detail 属性返回一个数字 在firefox中 正数表示向下滚动 ,负数表示向上滚动 与wheelDelta相反

    如何判断鼠标滚轮得滚动方向得兼容写法

    function mouseWheel(e) {
        e = e || window.event;
        console.log(e);
	    if (e.wheelDelta) {  //判断浏览器IE，谷歌滑轮事件
		    if (e.wheelDelta > 0) {
			    alert("滑轮向上滚动");
			    console.log(e.wheelDelta)
			    console.log(e.deltaMode)
			    console.log(e.detail)
		    }
		    if (e.wheelDelta < 0) { 
		        alert("滑轮向下滚动");
		        console.log(e.wheelDelta)
		    }
	    } else if (e.detail) {  //Firefox滑轮事件
		    if (e.detail> 0) {
			    alert("滑轮向下滚动");
			    console.log(e.detail)
		    }
		    if (e.detail< 0) { 
				alert("滑轮向上滚动");
				console.log(e.detail)
		    }
	    }
}
//给页面绑定滑轮滚动事件
//其他浏览器
document.onmousewheel = mouseWheel;
//火狐使用DOMMouseScroll绑定
document.addEventListener("DOMMouseScroll", mouseWheel)

    scroll事件和wheel事件区别

    onscroll 在滚动条滚动的时候被触发。
    onscroll 触发可以有多种方式，只要可以让滚动条发生滚动（X方向或Y方向）都可以触发该事件
    onscroll 滚动条不存在（容器的内容小于容器的大小）或者手动隐藏（添加样式overflow:hidden）
    就不会被触发
    onwheel 只要在鼠标滚轮滚动的时候就会触发 不论是否有滚动条

    更多相关内容

  • javascript鼠标滚轮滚动事件

     2021-06-12 11:49:10
    javascript如何绑定对象的鼠标滚轮事件，对对象触发鼠标滚轮事件时，如何阻止鼠标滚轮事件冒泡，不允许当前视窗滚动。下面对主流浏览器进行了测试(firefox12，opera12.5，safari5.0.4，chrome25，IE7~8)事件如何绑定...

    javascript如何绑定对象的鼠标滚轮事件，对对象触发鼠标滚轮事件时，如何阻止鼠标滚轮事件冒泡，不允许当前视窗滚动。

    下面对主流浏览器进行了测试(firefox12，opera12.5，safari5.0.4，chrome25，IE7~8)

    事件如何绑定

    firefox只支持DOMMouseScroll事件，不支持onmousewheel，其他浏览器只支持onmousewheel事件，如下表所示

    浏览器/事件/是否支持

    firefox

    opera

    safari

    chrome

    IE

    DOMMouseScroll

    支持

    否

    否

    否

    否

    onmousewheel

    不支持

    支持

    支持

    支持

    支持

    如何获取鼠标滚轮事件的数据(向上还是向下滚动)

    获取鼠标滚轮事件的数据，firefox，opera可以通过事件的detail属性获取，其他浏览器通过事件的wheelDelta来获取(opera特例，2个都支持)，具体数据看下表(注意：wheelDelta和detail的滚动方向值是相反的)

    浏览器/事件数据属性/数据值

    firefox

    opera

    safari

    chrome

    IE

    event.wheelDelta

    都为undefined

    向上滚动，120

    向下滚动，-120

    向上滚动，120

    向下滚动，-120

    向上滚动，120

    向下滚动，-120

    向上滚动，120

    向下滚动，-1200

    event.detail

    向上滚动，-3

    向下滚动，3

    向上滚动，-3

    向下滚动，3

    都为0

    都为0

    都为undefined

    测试代码如下

    var firefox = navigator.userAgent.indexOf('Firefox') != -1;

    function MouseWheel(e) {

    ///对img按下鼠标滚路，阻止视窗滚动

    e = e || window.event;

    if (e.stopPropagation) e.stopPropagation();

    else e.cancelBubble = true;

    if (e.preventDefault) e.preventDefault();

    else e.returnValue = false;

    document.title=(e.wheelDelta + '|' + e.detail)

    }

    window.onload = function () {

    var img = document.getElementById('img');

    firefox ? img.addEventListener('DOMMouseScroll', MouseWheel, false) : (img.onmousewheel = MouseWheel);

    }

    76d8c24ad66588e70fb3de535ab4d6eb.png

    加支付宝好友偷能量挖...

    2013-7-12Web开发网

    收起
    展开全文

  • JS禁用和启用鼠标滚轮滚动事件

     千次阅读 2020-12-30 07:23:31
    如何让DbGrid支持鼠标滚轮滚动 如何让DbGrid支持鼠标滚轮滚动 在主窗体上加一个ApplicationEvents控件(控件在Additional面板中), 在它的OnMessage事件中加入下述代码,一切搞定-! proced ... jQuery禁用、开启鼠标...

    // left: 37, up: 38, right: 39, down: 40,

    // spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36

    var keys = [37, 38, 39, 40];

    function preventDefault(e) {

    e = e || window.event;

    if (e.preventDefault)

    e.preventDefault();

    e.returnValue = false;

    }

    function keydown(e) {

    for (var i = keys.length; i--;) {

    if (e.keyCode === keys[i]) {

    preventDefault(e);

    return;

    }

    }

    }

    function wheel(e) {

    preventDefault(e);

    }

    function disable_scroll() {

    if (window.addEventListener) {

    window.addEventListener('DOMMouseScroll', wheel, false);

    }

    window.onmousewheel = document.onmousewheel = wheel;

    document.onkeydown = keydown;

    }

    function enable_scroll() {

    if (window.removeEventListener) {

    window.removeEventListener('DOMMouseScroll', wheel, false);

    }

    window.onmousewheel = document.onmousewheel = document.onkeydown = null;

    }

    js鼠标滚轮滚动图片切换效果

    效果体验网址:http://keleyi.com/keleyi/phtml/image/12.htm HTML文件代码: /p>

    纯javaScript实现元素平滑滚动，改进前两个版本，支持鼠标滚轮滚动和点击元素滚动，滚动更顺畅

    windowScroll(id, number, distance, direction, obj) 参数介绍: 1.id:所要滚动的元素id; 2.number:滚动次数; 3.distance:每 ...

    如何让DbGrid支持鼠标滚轮滚动

    如何让DbGrid支持鼠标滚轮滚动 在主窗体上加一个ApplicationEvents控件(控件在Additional面板中), 在它的OnMessage事件中加入下述代码,一切搞定-! proced ...

    jQuery禁用、开启鼠标滚轮事件

    1.禁用鼠标滚轮事件 $(document).bind('mousewheel', function(event, delta) {return false;}); 2.开启鼠标滚轮事件,直接解绑事件 ...

    js鼠标滑轮滚动事件绑定(兼容主流浏览器)

    /** Event handler for mouse wheel event. *鼠标滚动事件 */ var wheel = function(event) { var delta = 0; if ...

    WPF中关于自定义控件的滚动条鼠标停留在内容上鼠标滚轮滚动无效的问题

    问题起因:在一个用户控件里放置了1个TreeView垂直顺序放置. 当用户控件中的内容超过面板大小时,滚动条会自动出现 ,但是只有当鼠标指示在右边滚动条的那一条位置时,才支持鼠标滚轴滚动. 点在控件内 ...

    问题记录：JavaFx 鼠标滑轮滚动事件监听！

    问题描述: 在listview的item里面添加鼠标拖拽排序功能.代码如下: setOnMouseDragged(event -> { //设定鼠标长按0.3秒后才可拖拽 防止误操作 isCan ...

    c&num; dev控件 gridcontrol 数据跟随鼠标滚轮滚动也可以编辑

    在绑定书到gridControl后经常发现: 如果你设置了 this.gridView3.OptionsBehavior.Editable = false; 那数据可以跟随滚轮滚动,但如果你要复制某个 ...

    随机推荐

    TCP&sol;IP基础

    TCP/IP 是用于因特网 (Internet) 的通信协议. 计算机通信协议是对那些计算机必须遵守以便彼此通信的规则的描述. 什么是 TCP/IP? TCP/IP 是供已连接因特网的计算机进行通信的 ...

    【C&num;】1&period;1 第1章学习要点

    分类:C#.VS2015 创建日期:2016-06-14 教材:十二五国家级规划教材(第3版) 一.配套源程序(VS2015版)的运行截图 VS2015版的配套源 ...

    用CNTK搞深度学习 (二) 训练基于RNN的自然语言模型 &lpar; language model &rpar;

    前一篇文章  用 CNTK 搞深度学习 (一) 入门    介绍了用CNTK构建简单前向神经网络的例子.现在假设读者已经懂得了使用CNTK的基本方法.现在我们做一个稍微复杂一点,也是自然语言挖掘中很火 ...

    Digit Counts

    Count the number of k's between 0 and n. k can be 0 - 9. Example if n = 12, k = 1 in [0, 1, 2, 3, 4, ...

    DD&lowbar;belatedPNG，解决 IE6 不支持 PNG-24 绝佳解决方案

    png24在ie下支持透明.终于找到下面的可行办法: 我们知道 IE6 是不支持透明的 PNG-24 的,这无疑限制了网页设计的发挥空间. 然而整个互联网上解决这个 IE6 的透明 PNG-24 的方 ...

    一步一步写算法(之prim算法 上)

    原文:一步一步写算法(之prim算法 上) [ 声明:版权所有,欢迎转载,请勿用于商业用途.  联系信箱:feixiaoxing @163.com] 前面我们讨论了图的创建.添加.删除和保存等问题.今 ...

    Java 异常 重写抛出异常限制

    1 子类在重写父类抛出异常的方法时,要么不抛出异常,要么抛出与父类方法相同的异常或该异常的子类.如果被重写的父类方法只抛出受检异常,则子类重写的方法可以抛出非受检异常.例如,父类方法抛出了一个受检异常 ...

    改变Cube的Shader下的Alpha值，实现Cube若隐若现的效果。

    private float rotaSpeed = 5f; private float timer = 1; private bool flag = true; private float delay ...

    React Native&lpar;十三&rpar;&mdash&semi;&mdash&semi;ios键盘挡住textInput

    渐入佳境 用React Native重构的项目也快接近尾声,剩下的就是适配ios的功能了.慢慢地也从中琢磨出了一点门道,于是就遇见了键盘遮挡textInput问题斑斑: 正常页面: android点击 ...

    实现一个shell程序

    实现一个自己的shell程序,这个程序有这些功能:解释执行命令,支持输入输出重定向,支持管道,后台运行 程序.当运行该程序后,它支持以下的命令格式: 1.单个命令,如:ls.2.带l到多个参数的命令, ...

    收起
    展开全文

  • perfect scrollbar jQuery鼠标滚轮滚动事件

     2016-01-05 09:58:00
    比较好用的perfect scrollbar jQuery鼠标滚轮滚动事件
    收起

  • Vue中利用Js实现鼠标滚轮控制盒子横向滚动（监听鼠标滚轮滚动事件，火狐DOMMouseScroll、谷歌mousewheel）

     2021-12-03 09:36:27
    思路：使用js来实现监听鼠标滚轮滚动监听事件 <div id="box" class="box"> <div></div> </div> mounted() { this.scrollInit() }, methods: { scrollInit() { // 获取要绑定事件的...

    思路：使用js来实现监听鼠标滚轮滚动监听事件

    <div id="box" class="box">
    <div></div>
</div>

    mounted() {
    this.scrollInit()
  },
beforeDestroy(){
      if (navigator.userAgent.indexOf('Firefox') >= 0) {
        this.scrollDiv.removeEventListener('DOMMouseScroll', this.scrollHandler, false)
      } else {
        this.scrollDiv.removeEventListener('mousewheel', this.scrollHandler, false)
      }
    },
methods: {
	scrollInit() {
	      // 获取要绑定事件的元素
	      this.scrollDiv = document.getElementById("box");
	      if (navigator.userAgent.indexOf('Firefox') >= 0) {
	          // 火狐写法 添加滚轮滚动监听事件
	          this.scrollDiv.addEventListener('DOMMouseScroll', this.scrollHandler, false)
	      } else {
	          // 非火狐 添加滚轮滚动监听事件
	          this.scrollDiv.addEventListener('mousewheel', this.scrollHandler, false)
	      }
	},
	scrollHandler(event){
        if(event.preventDefault)
        {
          event.preventDefault();
        }else{
          event.returnValue = false;
        }
        // 获取滚动方向
        const detail = event.wheelDelta || event.detail;
        // 定义滚动方向，其实也可以在赋值的时候写
        const moveForwardStep = 1;
        const moveBackStep = -1;
        // 定义滚动距离
        let step = 0;
        // 判断滚动方向,这里的100可以改，代表滚动幅度，也就是说滚动幅度是自定义的
        if (navigator.userAgent.indexOf('Firefox') >= 0) {
          // 火狐浏览器和谷歌的值正好相反
          if (detail > 0) {
            step = moveForwardStep * 100;
          } else {
            step = moveBackStep * 100;
          }
        }else{
          if (detail < 0) {
            step = moveForwardStep * 100;
          } else {
            step = moveBackStep * 100;
          }
        }
        // 对需要滚动的元素进行滚动操作
        this.scrollDiv.scrollLeft += step;
      },

    .box{
  width: 595px;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
}

    P.s.：浏览记录清空了，这个参考文章找不到了。。。

    如果大家想一起交流学习，共同进步，欢迎搜索公众号“是日前端”，输入关键词如：前端基础，获取资料，资料刚开始整理，目前还在完善中，点击交流群按钮进交流群，群里仅限技术交流、面试交流等，需要其它相关资料可以群里说，后续交流群人数增多会考虑特色内容，再次感谢大家的支持~

    收起
    展开全文
    vue.js javascript 前端

  • javascript 鼠标滚轮事件

     2020-10-30 00:54:47
    由于鼠标滚轮事件在 IE 和 FF 的实现有点不一样，所以有需要把这个写成一个统一可用的事件。
    收起

  • openlayers的鼠标滚轮事件

     2016-01-15 10:01:47
    openlayers如何启用和禁用鼠标滚轮事件。
    收起

  • 鼠标滚轮滚动事件

     2015-04-03 11:05:56
    鼠标滚轮滚动事件 有时候我们会遇到一个页面有两个滚动条的问题，我们希望只有一个滚动条可以使用，以下代码可以使用： 首先我们要有一个页面滚动条，一个div的滚动条，我这里的div名为swf，flexpaper的显示div。...
    收起
    代码

  • 解决chrome浏览器中鼠标滚轮滚动事件失效的问题

     万次阅读 2019-05-24 17:23:05
    今天遇到了一个html5页面由于开启了图片遮罩层在chrome浏览器中，鼠标滚轮上下滚动时，页面不动的问题，后查询相关资料后解决，具体方法是加入如下代码： <script type="text/javascript"> var scrollFunc = ...
    收起
    javascript

  • tkinter绑定鼠标滚轮滚动事件

     千次阅读 2015-11-01 14:20:59
    大部分的讲python tkinter的书籍好像不太提到如何绑定鼠标滚轮滚动事件哦（其实我也只看了2本书而已）。这在某些地方也可能会用到，比如放大缩小图片的时候。我查了下python tkinter文档，找到了如何绑定的方法，...
    收起
    python

  • vue里面怎么监听鼠标滚轮事件 滚动

     千次阅读 2019-07-27 09:37:06
    if(document.getElementsByTagName("li").length == 1){ //此处决定无论一次滚轮滚动的距离是多少，此事件 //都得等上次滚动结束，才会执行本次 this.isShow = false setTimeout(() => { this.isShow = true ...
    收起

  • JS鼠标滚轮水平滚动特效.zip

     2019-07-11 10:49:11
    脚本简介：JS鼠标滚轮水平滚动特效是一款横向滚动排列的JS水平滚动代码。
    收起

  • vue里面关于实现鼠标滚轮滚动横向滚动条滚动案例

     2021-12-07 16:55:19
    起初还以为鼠标滚轮事件是全局 没想到啊 竟然有局部得 这里是我无知了！！！ div class="gzparkNavWarp" @mousewheel="handleMouseWheel"> <el-menu :default-active="activeIndex" mode="horizontal" ...
    收起
    vue.js javascript 前端

  • js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)

     2020-10-22 21:53:16
    主要介绍了js实现的鼠标滚轮滚动切换页面效果,类似360默认页面滚动切换效果.涉及JavaScript响应鼠标事件动态变换页面元素的相关技巧,需要的朋友可以参考下
    收起

  • 请问，qt窗口如何同时跟踪鼠标移动和鼠标滚轮滚动事件

     2019-06-27 13:51:52
    如题，我写了wheelEvent 和 mouseMoveEvent ，因为要跟踪鼠标移动还写了setMouseTracking(true); 但是这个时候wheelEvent不触发，把setMouseTracking(true);注释掉wheelEvent就能触发，请问如何才能同时跟踪这两...
    收起
    c++

  • HTML鼠标滚轮事件

     2022-04-17 13:38:31
    <!... <... <head> ...其他事件</title> <meta charset="utf-8" /> <style type="text/css"> .msg{ width:600px; margin:100px auto 0px auto; color:#ff0000; ...
    收起
    html5 javascript

  • javascript实现禁止鼠标滚轮事件

     2020-10-23 21:31:24
    主要介绍了javascript实现禁止鼠标滚轮事件的相关资料,需要的朋友可以参考下
    收起

  • 鼠标滚轮事件

     千次阅读 2019-09-14 20:55:45
    前几天一个同学问我鼠标滚动事件。想做一个通过滚动鼠标的滚轮，来旋转导航。 查了点资料，完成了同学的问题。 不过，作为一个知识点，也记录下来，以加强印象。 鼠标滚轮事件，就是 wheel （滚轮）事件。 注：...
    收起

  • js鼠标滚轮事件

     千次阅读 2021-03-06 12:23:50
    当滚动鼠标滚轮或操作其它类似输入设备时会触发滚轮事件。 2.主要js代码 因标准未定义滚轮事件具体会引发什么样的行为，引发的行为实际上是各浏览器自行定义的。 window.addEventListener("wheel", function(e) {...
    收起
    javascript

  • 滚动条效果+鼠标滚轮事件+拖拽-完善.html

     2020-04-11 17:53:22
    滚动条效果
    收起

  • vue遮罩层阻止鼠标滚轮滚动事件

     2020-06-22 11:17:54
    背景：给vue用fixed定位加一个遮罩层，表示状态（等待中），滚动鼠标滚轮发现下面一层的页面随之滚动，我们的需求想要阻止下层页面滚动，所以要给遮罩层加一个取消鼠标滚轮默认行为的事件 上代码： <div class=...
    收起
    vue

  • VB6内 响应鼠标滚轮事件 使用Hook

     2018-01-16 11:11:00
    VB6内 响应鼠标滚轮事件，使用Hook钩子捕捉消息，具体处理过程需要自己编写
    收起

  • vue监听鼠标滚动事件

     千次阅读 2021-02-05 11:46:12
    <script> export default { name: "home", data(){ return{ currentId:1, listName: [] //滚动的列表 } }, methods:{ //函数防抖 debounce(func, wait) {
    收起
    vue

  • pixi-mousewheel:pixi.js插件，可在显示对象上启用鼠标滚轮事件

     2021-05-08 11:24:11
    pixi.js的此插件会自动为pixi显示对象调度鼠标滚轮滚动事件。 它仅针对具有交互性并设置了特殊标志的对象触发事件。 当滚动所述显示对象时，默认文档滚动被阻止。 此外，它还标准化了鼠标滚轮增量，以实现跨浏览器的...
    收起
    JavaScript

  • js监听鼠标的滚轮滚动事件教程

     2021-08-04 08:53:44
    主要是有两种，onmousewheel(firefox不支持)和dommousescroll(只有firefox支持)，关于这两个事件这里不做详述，想要了解的朋友请移步：鼠标滚轮(mousewheel)和dommousescroll事件。具体实现：1. 需要添加事件监听，...
    收起

  • 滚轮事件和拖动滚动条事件

     2021-07-11 17:51:18
    一、鼠标的滚轮事件 触发: 鼠标的滚轮上下滑动的时候触发 代码: // DOMMouseScroll:火狐 // onmousewheel:其他浏览器 if(window.addEventListener){ window.addEventListener('DOMMouseScroll',wheel,false) } ...
    收起

  • winform自绘波形，鼠标滚轮滚动缩放波形尺寸

     2019-03-29 17:41:05
    winform自绘波形，鼠标滚轮滚动以鼠标为中心缩放波形尺寸，鼠标按下图形左右拖拽图形，1~2键盘按键可以画出俩个时间标尺计算俩个标尺之间的时间，双缓冲panel自定义控件绘图不闪烁
    收起

  • js鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器)

     2020-10-26 10:14:09
    本篇文章主要介绍了js鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器)。需要的朋友可以过来参考下，希望对大家有所帮助
    收起

  • javascript监听鼠标滚轮事件浅析

     2020-10-25 20:41:00
    主要介绍了javascript监听鼠标滚轮事件浅析,使用具体例子说明,同时考虑了不同的浏览器,需要的朋友可以参考下
    收起

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 23,202
精华内容 9,280
热门标签
关键字：

鼠标滚轮滚动事件