firefox使用DOMMouseScroll,其他浏览器使用mousewheel
当滚动时获取wheelDelta值，firefox使用detail:值为下滚3上滚-3,其他浏览器使用wheelDelta:值为下滚-120上滚120，通过判断其值为正或者负即可判断鼠标滚轮上滚还是下滚

js的写法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>滚轮上下滑动的兼容性</title>
</head>
<body>
<label>IE/Opera/谷歌、360<input type="text" id="wheelDelta"></label>
<label>(火狐）滚动值： <input type="text" id="detail"></label>
<script type="text/javascript">
var scrollFn = function (e) {
e = 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){//火狐
t2.value = e.detail;
}
}
// 通过事件监听给元素绑定一个事件
/*
addEventListener() 用于向指定元素添加事件。
可以向一个元素添加多次事件或者多次不同事件，后面的事件是不会覆盖前面的。
element.addEventListener(event,fn,useCaption );
参数说明：tr件，比如 click mouseenter mouseleave
fn 回调函数
useCaption 用于描述是冒泡还是捕获。默认值是false，即冒泡传递。
当值为true，就是捕获传递。
*/
if (document.addEventListener) {
document.addEventListener('DOMMouseScroll',scrollFn,false);
}
// w3c
window.onmousewheel=document.onmousewheel=scrollFn;//IE/Chrome/360/Opera
</script>
</body>
</html>

二         js写法二：

var scrollfns = function(e){
e = e || window.event;
if (e.wheelDelta) {
if (e.wheelDelta > 0) {
console.log('IE/Opera上滚');
}else{
console.log('IE/Opera下滚');
}
}else if (e.detail) {
if (e.detail > 0) {
console.log('火狐上滚');
}else{
console.log('火狐下滚');
}
}
}
if(document.addEventListener){
document.addEventListener('DOMMouseScroll',scrollfns,false);
};
//w3c
window.onmousewheel=document.onmousewheel=scrollfns;

三         jquery滚轮事件的写法：通过判断滚动条卷进去的距离来判断

var p=0;
$(window).scroll(function(){
// e = e || window.event;
p = $(this).scrollTop();
if (p>0) {//0表示卷进去的距离为0
alert('下滚');
}else{
alert('上滚');
}
});

jquery写法demo：

$(window).scroll(function(){

p = $(this).scrollTop();
if (p>0) {
// alert('下滚');
$('#leftcon').css({
'top':'60px'
});
/* $('#leftcon').animate({
'top':'0'
},1000);*/
}
if (p<=0) {
// alert('上滚');
// removeAttr('style')移除元素属性
$('#leftcon').css({'top':'160px'});

}

});

javascript鼠标滚动的更多相关文章

  1. JavaScript一个鼠标滚动事件的实例

    <script type="text/javascript" src="./whenReady.js"></script> <!- ...

  2. jQuery鼠标滚动垂直全屏切换代码

    体验效果:http://hovertree.com/texiao/jquery/68/ 源码下载:http://hovertree.com/h/bjaf/f643upc4.htm 代码如下: < ...

  3. 原生JS—实现图片循环切换及监测鼠标滚动切换图片

    今天我们主要讲讲如何使用原生JS实现图片的循环切换的方法以及如何检测鼠标滚动循环切换图片.多余的话我们就不多说了,我们一个一个开始讲吧. 1  原生JS实现图片循环切换 -- 方法一 在上栗子之前我们 ...

  4. js进阶 12-6 监听鼠标滚动事件和窗口改变事件怎么写

    js进阶 12-6 监听鼠标滚动事件和窗口改变事件怎么写 一.总结 一句话总结:滚动事件scroll(),浏览器窗口调整监听resize(),思考好监听对象. 1.滚动事件scroll()的监听对象是 ...

  5. wpf图片查看器，支持鼠标滚动缩放拖拽

    最近项目需要,要用到一个图片查看器,类似于windows自带的图片查看器那样,鼠标滚动可以缩放,可以拖拽图片,于是就写了这个简单的图片查看器. 前台代码: <Window x:Class=&qu ...

  6. js 鼠标滚动到某屏时，加载那一屏的数据，仿京东首页楼层异步加载模式

    js用处:在做商城时,首页图片太多,严重影响首页打开速度,所以我们需要用到异步加载楼层.js名称:鼠标滚动到某屏时,加载那一屏的数据,仿京东首页楼层模式js解释:1.用于商城的楼层内容异步加载,滚动条 ...

  7. Winform 图片鼠标滚动查看(放大,缩小,旋转,拖动查看)[日常随笔]

    方法千千万,我只是其中一笔[通过控制PictureBox来控制图片,图片完全施展在控件中]...几久不做,还真有点陌生! 窗体构造中添加鼠标滚动: /// <summary> /// 窗体 ...

  8. 用AutoHotKey彻底解决“Ctrl键+鼠标滚动”时的缩放问题

    “Ctrl键+鼠标滚动”会造成代码编辑窗口的字体缩放,这是自Visual Studio 2010以来引入的一个新特性,也是一个恼人的问题,详见VS2010中尴尬的代码窗口缩放功能. 于是,每次安装Vi ...

  9. 鼠标滚动插件smoovejs和wowjs

    置顶文章:<纯CSS打造银色MacBook Air(完整版)> 上一篇:<图片ping.JSONP和CORS跨域> 作者主页:myvin 博主QQ:851399101(点击QQ ...

随机推荐

  1. 【转】Oracle 11g安装图文攻略

    一.Oracle 下载     注意Oracle分成两个文件,下载完后,将两个文件解压到同一目录下即可. 路径名称中,最好不要出现中文,也不要出现空格等不规则字符. 二.Oracle安装     1. ...

  2. HashMap Hashtable LinkedHashMap 和TreeMap

    Map主要用于存储健值对,根据键得到值,因此不允许键重复(重复了覆盖了),但允许值重复.Hashmap 是一个最常用的Map,它根据键的HashCode值存储数据,根据键可以直接获取它的值,具有很快的 ...

  3. fatal error: google/protobuf/arena.h:没有那个文件或目录

    安装caffe时make all会出现这个错误,按照https://github.com/BVLC/caffe/issues/4988说法,可能时libprotobuf-dev过时了,需要从源码重新变 ...

  4. 用strings命令查看kafka-log内容

    kafka的log内容格式还不没怎么了解,想快速浏览消息内容的话,除了使用它自带的kafka-console-consumer.sh脚本,还可以直接去看log文件本身,不过内容里有部分二进制字符,通过 ...

  5. PHP 中解析 url 并得到 url 参数

    这里介绍两种对url操作的方法: 1.拿到一个完整url后,如何解析该url得到里面的参数. /** * 解析url中参数信息,返回参数数组 */ function convertUrlQuery($ ...

  6. 性能测试二十六：环境部署之Mysql+Redis+Tomcat环境整合

    系统中使用了缓存+数据库,通用读取数据规则1.先从缓存读数据,如果有,直接返回数据:2.如果没有,去数据库中读,然后再插入到缓存中,再返回数据 Mysql+Redis+Tomcat环境整合 1.修改P ...

  7. BOM下的属性和方法---下

    继续BOM下的属性和方法---上 代码示例(亲测)2:   <title>location对象的属性</title> <script> //服务器环境我再此次演示中 ...

  8. python 全栈开发，Day73(django多表添加,基于对象的跨表查询)

    昨日内容回顾 多表方案: 如何确定表关系呢? 表关系是在2张表之间建立的,没有超过2个表的情况. 那么相互之间有2条关系线,先来判断一对多的关系. 如果其中一张表的记录能够对应另外一张表的多条记录,那 ...

  9. MySQL学习笔记：一道group by+group_concat解决的小问题

    闲来无事,逛逛V2EX发现一道MySQL数据库题目,原题如下: 遂打开很长一段时间都没用过SQLyog,噗呲噗呲的干起活来…… 建测试表: CREATE TABLE test_001 ( id INT ...

  10. win7 64 下 VS2008 调试、退出时错误的解决

    最近调试老程序的时候发现原来的VS2008会偶尔在调试C++程序的时候出现程序未响应的情况,开始还以为是个案,后来出现的频率越来越高完全影响心情啊!! 准备花时间解决一下这个问题.网上搜索没有发现任何 ...