鼠标滚动事件

鼠标滚动事件

关于滚动事件这方面,其实是比较乱的。

滚轮事件的兼容性差异有些不拘一格,不是以往的IE8-派和其他派,而是FireFox派和其他派。

包括IE6在内的浏览器是使用onmousewheel,而FireFox浏览器一个人使用DOMMouseScroll. 经自己测试,即使现在FireFox 19下,也是不识onmousewheel

在其他派中检测滚动数值的属性是wheelDelta ,向上滚为120,向下为-120。

在火狐中检测滚动数值的属性是detail,向上滚为-3,向下为3。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <script>
            document.onmousewheel = function(event){
                ev = event || window.event;
                alert(ev.wheelDelta);
                if(ev.wheelDelta > 0){//120
                    alert(‘上‘)
                }else(//-120
                    alert(‘下‘)
                )

            }
            document.addEventListener("DOMMouseScroll", function(ev) {
                alert(ev.detail);
                if(ev.detail < 0){//-3
                    alert(‘上‘)
                }else(//3
                    alert(‘下‘)
                )
            });
        </script>
    </body>
</html>
 
时间: 2024-10-07 15:24:57

鼠标滚动事件的相关文章

设置鼠标滚动事件

当QScrollview内容过多出现滚动条时,此时如果把鼠标移到里面的一个button上并滚动滑轮时,可以看到QScrollview并不会出现滚动的情况,因此我们就需要为button添加一个滚动事件 注:SubTitlePushButton继承于QPushButton,自定义的一个button类,然后在里面添加鼠标滚动事件 bool SubTitlePushButton::event(QEvent *event) { /* if (event->type() == QEvent::Paint)

对于鼠标滚动事件的扩充

本篇如题,是对上一个鼠标滚动事件的扩充 具体扩充内容: 1.可以添加点击元素(control_up/control_down)来控制页面的滚动 2.可以选择触发方式(点击.滚轮滚动.点击和滚轮滚动) //使用鼠标滚轮每次滚动浏览器大小的距离//obj格式{touch: click||scroll||click&scroll, control_up: id, control_down: id}//touch:什么触发方式,三个选项click/scroll/click&scroll:contr

解决ScrollViewer嵌套的DataGrid、ListBox等控件的鼠标滚动事件无效

C# 中,两个ScrollViewer嵌套在一起或者ScrollViewer里面嵌套一个DataGrid.ListBox.Listview(控件本身有scrollviewer)的时候,我们本想要的效果是鼠标滚动整个ScrollViewer的内容,但你会发现实际结果和你想像的不一样,内部有scrollviewer的内容不会随鼠标的滚动而滚动,怎么办呢? 解决办法如下: 先截取外面的ScrollViewer的滚动事件,然后再重新让外面的ScrollViewer触发滚动事件就可以了 假设有2个控件,一

鼠标滚动事件 - onmousewheel

1.Jquery-MouseWheel jquery默认是不支持支持鼠标滚轮事件(mousewheel) jquery MouseWheel下载:https://github.com/jquery/jquery-mousewheel/blob/master/jquery.mousewheel.js 然后就可以使用mousewheel和unmousewheel事件函数了 1 $('div.mousewheel_example').mousewheel(fn); 2 $('div.mousewhee

理解鼠标滚动事件

javascript<script> window.onload = function(){ var count = 0; document.onmousewheel = function(e){ /*鼠标滚动的量 下滚是负 上滚是正*/ if(e.wheelDelta < 0){ count ++; }else{ count --; } console.log(count); } }</script>``` #### 第二步 了解 fullpage jquery插件 >

鼠标滚动事件兼容性 wheel、onwheel

wheelEvent = "onwheel" in document.createElement("div") ? "wheel" : // Modern browsers support "wheel" document.onmousewheel !== undefined ? "mousewheel" : // Webkit and IE support at least "mousewhee

JQuery的鼠标滚动事件

jQuery(window).height()代表了当前可见区域的大小,而jQuery(document).height()则代表了整个文档的高度,可视具体情况使用. 注意当浏览器窗口大小改变时(如最大化或拉大窗口后) jQuery(window).height() 随之改变,但是jQuery(document).height()是不变的. $(document).scrollTop() 获取垂直滚动的距离 即当前滚动的地方的窗口顶端到整个页面顶端的距离$(document).scrollLef

监听鼠标滚动事件,如滚动鼠标出现返回顶部按钮

JQuery方法: $(window).bind('scroll',function(){ // var len = $(this).scrollTop() if($('body').scrollTop() < 10){ $('#DiaLayer').hide(); } else { $('#DiaLayer').show(); }}) 原生代码: // scrollFlag = false时向下滚动出现导航条 var scrollFlag = false; window.onscroll =

Winform 中panel的mousewheel鼠标滚轮事件触发

如果将窗体或容器控件(如Panel控件)的AutoScroll属性设置为True时,那么当窗体或Panel容不下其中的子控件时就会出现 滚动条,通过移动滚动条可以上下显示出窗体或Panel中的全部内容.但是默认情况下滚动条的移动只能通过鼠标直接拖动滚动条来实现,而不能通过鼠标的滚 轮来实现上下移动,因此需要手动添加代码来实现这个功能. 滚动鼠标的滚轮,触发的是窗体或控件上的 MouseWheel 事件.但是在VS.net2005中,窗体和控件的事件列表中却不包含 MouseWheel 事件,因此