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. openstack swift节点安装手册1-节点配置

    本文参照官方教程:http://docs.openstack.org/project-install-guide/object-storage/draft/environment-networking ...

  2. C# 实现UDP打洞通信（一）

    最近研究了一下网络打洞的相关技术,TCP的方式据说可行性不高,各种困难,因此决定采用UDP(UDP是什么就不解释了)的方式. 原理: 我们都知道局域网内的主机想要访问外网的服务器是比较容易的,比如浏览 ...

  3. C# 使用Win32 API将1个EXE程序嵌入另1个程序中

    已经干到天快亮了,就不废话直接贴点儿代码吧 ; ; /// <summary> /// 查找窗口 ///第一个参数是窗口的标题,第二个参数可直接用 null ///通过窗口的标题查找对应的 ...

  4. plsql developer无法识别32位oracle问题如何解决？

    1.登录PL/SQL Developer这里省略Oracle数据库和PL/SQL Developer的安装步骤,注意在安装PL/SQL Developer软件时,不要安装在Program Files ...

  5. imp高版本的dmp文件报错问题

    imp高版本的dmp文件报错问题   导出方:oracle 11R2  www.2cto.com     导入方:oracle 10R2   通过imp导入时提示如下:     解决方法:   通过编 ...

  6. hping网络安全工具的安装及使用

    hping是用于生成和解析TCPIP协议数据包的开源工具.创作者是Salvatore Sanfilippo.目前最新版是hping3,支持使用tcl脚本自动化地调用其API.hping是安全审计.防火 ...

  7. CentOS 6.3下NFS安装配置

    CentOS 6.3下NFS安装配置 一.环境介绍   NFS服务器:CentOS6.3 192.168.8.20 NFS客户端:CentOS6.5 192.168.8.39 二.服务器端安装配置   ...

  8. Ex 6_23 一个生产系统共包含n个顺序执行的阶段..._第七次作业

  9. Gradient Domain Guided Image Filtering（梯度域导向滤波）

    作者提出了一种新的梯度域引导图像滤波器,通过将明确的一阶边缘感知约束结合到现有的引导图像滤波器中. matlab代码实现 转载至:https://blog.csdn.net/majinlei121/a ...

  10. Linux在bash history当中添加timestamp

    执行以下两条命令即可 echo 'export HISTTIMEFORMAT="%y-%m-%d %T "' >> /etc/profile source /etc/p ...