JS判断鼠标向上滚动还是向下滚动
js如何判断滚轮的上下滚动,我们应该都见到过这种效果,用鼠标滚轮实现某个表单内的数字向上滚动就增加,向下滚动就减少的操作,这种效果是通过js对鼠标滚轮的事件监听来实现的。今天简单的研究了一下如何使用javascript来判断鼠标是向上滚动还是向下滚动,简要分享。
首先,不得不说一下,因为不同的浏览器有不同的滚轮事件。主要是有两种,onmousewheel(firefox不支持)和DOMMouseScroll(只有firefox支持),关于这两个事件这里不做详述,想要了解的朋友请移步:鼠标滚轮(mousewheel)和DOMMouseScroll事件,所以在这个过程中需要添加事件监听,代码如下:兼容firefox采用addEventListener监听。
- /*注册事件*/
- if(document.addEventListener){
- document.addEventListener('DOMMouseScroll',scrollFunc,false);
- }//W3C
- window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome
另外判断滚轮向上或向下滚动在浏览器中也要考虑兼容性,现在五大浏览器(IE、Opera、Safari、Firefox、Chrome)中Firefox 使用detail,其余四类使用wheelDelta;两者只在取值上不一致,代表含义却是一致的,detail只取±3,wheelDelta只取±120,其中正数表示为向上,负数表示向下。
具体的示例代码如下所示:
- <label for="wheelDelta">滚动值:</label>(IE/Opera)<input type="text" id="wheelDelta"/>
- <label for="detail">滚动值:(Firefox)</label><input type="text" id="detail"/>
- <script type="text/javascript">
- var scrollFunc=function(e){
- ee=e || window.event;
- var t1=document.getElementById("wheelDelta");
- var t2=document.getElementById("detail");
- if(e.wheelDelta){//IE/Opera/Chrome
- t1.value=e.wheelDelta;
- }else if(e.detail){//Firefox
- t2.value=e.detail;
- }
- }
- /*注册事件*/
- if(document.addEventListener){
- document.addEventListener('DOMMouseScroll',scrollFunc,false);
- }//W3C
- window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome
- </script>
通过运行上述代码我们可以得出以下结果:
在非firefox浏览器中,滚轮向上滚动返回的数值是120,向下滚动返回-120
而在firefox浏览器中,滚轮向上滚动返回的数值是-3,向下滚动返回3
代码部分如下,e.wheelDelta是判断是否为非firefox浏览器,e.detail为firefox浏览器
- if(e.wheelDelta){//IE/Opera/Chrome
- t1.value=e.wheelDelta;
- }else if(e.detail){//Firefox
- t2.value=e.detail;
- }
JS判断鼠标向上滚动还是向下滚动的更多相关文章
- js判断鼠标向上滚动并浮动导航
<div id="Jnav"> <ul class="nav"> <li><a href="#"& ...
- JS 判断鼠标滚轮的上下滚动
JS 判断鼠标滚轮的上下滚动 <script type="text/javascript"> var scrollFunc = function (e) { e = ...
- js-scroll判断页面是向上滚动还是向下滚动
原理:那当前的scrollTop和之前的scrollTop对比 如果变大了,表示向下滚动(scrollTop值变大): 如果变小了,表示向上滚动(scrollTop值变小). 方法一:js代码: $( ...
- js判断鼠标滑轮滚动方向并根据滚动的方向触发不同的事件
<script> var scrollFunc = function (e) { var direct = 0; e = e || window.event; if (e.wheelDel ...
- JS判断鼠标进入容器方向的方法和分析window.open新窗口被拦截的问题
1.鼠标进入容器方向的判定 判断鼠标从哪个方向进入元素容器是一个经常碰到的问题,如何来判断呢?首先想到的是:获取鼠标的位置,然后经过一大堆的if..else逻辑来确定.这样的做法比较繁琐,下面介绍两种 ...
- JS判断鼠标移入元素的方向
最终效果 这里的关键主要是判断鼠标是从哪个方向进入和离开的 $("li").on("mouseenter mouseleave",function(e) { v ...
- js 判断鼠标滚轮方向
最近因为公司项目的要求,需要做页面的全屏滚动切换效果. 页面的切换,需要脚本监听鼠标滑轮的滚动事件,来判断页面是向上切换or向下切换. 这里的脚本很简单,我就直接贴出来吧. $('html').on( ...
- JS判断鼠标从什么方向进入一个容器
偶然将想到的一个如何判断鼠标从哪个方向进入一个容器的问题.首先想到的是给容器的四个边添加几个块,然后看鼠标进入的时候哪个块先监听到鼠标事件.不过这样麻烦太多了.google了一下找到了一个不错的解决方 ...
- 向上滚动或者向下滚动分页异步加载数据(Ajax + lazyload)[上拉加载组件]
/**** desc : 分页异步获取列表数据,页面向上滚动时候加载前面页码,向下滚动时加载后面页码 ajaxdata_url ajax异步的URL 如data.php page_val_name a ...
随机推荐
- 活锁(livelock)
活锁(livelock) 活锁指的是任务或者执行者没有被阻塞,由于某些条件没有满足,导致一直重复尝试,失败,尝试,失败. 活锁和死锁的区别在于,处于活锁的实体是在不断的改变状态,所谓的“活”, 而处于 ...
- java反思reflect 分析Object物
直接看它的一个例子 </pre><pre name="code" class="java">package reflect; impor ...
- Java并发编程:线程池的使用(转)
Java并发编程:线程池的使用 在前面的文章中,我们使用线程的时候就去创建一个线程,这样实现起来非常简便,但是就会有一个问题: 如果并发的线程数量很多,并且每个线程都是执行一个时间很短的任务就结束了, ...
- ash
查看当前用户使用的Shell,echo $SHELL BusyBox ('01-current) The BusyBox distribution is aiming for small implem ...
- sql查询第二大的记录(转)
问题: 数据库中人表有三个属性,用户(编号,姓名,身高),查询出该身高排名第二的高度.建表语句 create table users ( id ,) primary key, name ), heig ...
- JavaEE(12) - JPA规范及实现(TopLink和Hibernate)
1. JPA规范与ORM框架之间的联系 JPA规范并不属于EJB3规范,它是一套完全独立的规范,不仅可以在基于EJB的JavaEE应用程序中使用,而且完全可以在普通JavaSE应用程序中使用. JPA ...
- 详细解释VB连接access几种方法数据库
在VB中,连接ACCESS数据库的方法主要有以下三种 使用ADO对象,通过编写代码訪问数据库 Connection 对象 ODBC数据源 使用ADO Data 控件高速创建数据库连接 有三种连接方法 ...
- ZooKeeper完全分布式安装和配置
ZooKeeper简介见官方网站. 1.环境说明 在两台装有centos6.4(32位)的server上安装ZooKeeper,官网建议至少3个节点.资源有限,本次实验就2台了. 须要提前安装jdk. ...
- 彩色图像上执行Mean Shift迭代搜索目标 ,维加权直方图 + 巴氏系数 + Mean Shift迭代
今天要给大家分享的是: 在彩色图像上进行Mean Shift迭代搜索目标 二维加权直方图+巴氏系数+Mean Shift迭代 关于 加权直方图.巴氏系数.Mean Shift迭代 这三者之间的关系请大 ...
- 银联+移动+三星PK微信、余额宝
在不远的将来,你可以扔掉钱包,扔掉信用卡,揣着手机买东西. 银联.移动.三星这些不同的行业大佬,因为这个目标,被一款名叫NFC的支付技术连接在了一起. 这场游戏的参与者众多,一个合纵连横的时代正在到来 ...