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. TCP/IP指纹鉴别 fingerprint

    http://www.freebuf.com/articles/system/30037.html使用TCP/IP协议栈指纹进行远程操作系统辨识 Fyodor <fyodor@insecure. ...

  2. 无向图最小割Stoer-Wagner算法学习

    无向连通网络,去掉一个边集可以使其变成两个连通分量则这个边集就是割集,最小割集当然就权和最小的割集. 使用最小切割最大流定理: 1.min=MAXINT,确定一个源点 2.枚举汇点 3.计算最大流,并 ...

  3. MySQL数据库——安装教程（5.7版本）

    一.配置MySQL数据库 1.解压绿色版mysql,并改名为mysql5.7,如下图 对比一下下图5.6以前的版本,少data目录(存放数据)和my-default.ini文件(配置信息) 二.安装服 ...

  4. elk系统通过nginx添加对kibana的登录认证

    elk系统添加对kibana的登录认证 关于elk系统的安装配置可以参考:Centos6.5安装Logstash ELK stack 日志管理系统及使用详解 http://blog.csdn.net/ ...

  5. 【Android开源库】美团等APP城市选择

    CityPicker 现在使用比较多的类似美团等APP的城市选择界面. 2步即可实现,就是这么简单粗暴! Gif image APK 下载demo.apk体验. Install Gradle: com ...

  6. NodeJs>------->>第二章：Node.js中交互式运行环境--------REL

    第二章:Node.js中交互式运行环境--------REL 一:REPL运行环境概述 C:\Users\junliu>node > foo = 'bar' ; 'bar' > 二: ...

  7. python 全栈开发，Day48(标准文档流,块级元素和行内元素,浮动,margin的用法,文本属性和字体属性)

    昨日内容回顾 高级选择器: 后代选择 : div p 子代选择器 : div>p 并集选择器: div,p 交集选择器: div.active 属性选择器: [属性~='属性值'] 伪类选择器 ...

  8. 51nod1185 威佐夫游戏 V2 （模拟乘法）

    1185 威佐夫游戏 V2  基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题  收藏  关注 有2堆石子.A B两个人轮流拿,A先拿.每次可以从一堆中取任意个或从2堆中取 ...

  9. 【APUE | 10】函数signal

    函数signal 函数signal介绍 typedef void (*sighandler_t)(int); sighandler_t signal(int signum, sighandler_t ...

  10. Eclipse中打包maven项目-war包方式

    IntelliJ IDEA打包成war(包括maven项目)点击打开链接 首先要在maven项目中的pom.XML中配置好需要的配置: <project xmlns="http://m ...