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. 使用console进行 性能测试 和 计算代码运行时间

    原文:http://www.tuicool.com/articles/JrARVjv 对于前端开发人员,在开发过程中经常需要监控某些表达式或变量的值,如果使用用 debugger 会显得过于笨重,最常 ...

  2. 前端工程化-webpack(babel编译ES6）

    最新版安装与普通安装 使用babel-loader编译ES6,需要遵循规范,安装babel-presets 规范列表 对应babel-loader,babel-preset安装最新版和普通版: pre ...

  3. java多线程快速入门（六）

    多线程应用实例(批量发送短信) 1.创建实体类 package com.cppdy; public class UserEntity { private int id; private String ...

  4. 目标检测-yolo2

    转载自:http://blog.csdn.net/qq_34784753/article/details/78825493 对于现在的最好的检测系统来说,yolo_v1 的问题主要出现在两方面,也就是 ...

  5. C# byte数组与Image的相互转换【转】

    功能需求: 1.把一张图片(png bmp jpeg bmp gif)转换为byte数组存放到数据库. 2.把从数据库读取的byte数组转换为Image对象,赋值给相应的控件显示. 3.从图片byte ...

  6. JQuery动画详解（四）

    一:基本动画show()显示隐藏的匹配元素.这个就是 'show( speed, [callback] )' 无动画的版本.如果选择的元素是可见的,这个方法将不会改变任何东西.无论这个元素是通过hid ...

  7. 【Algorithm | 链表】单链表“环”、“环的起点”、“环的长度”问题

    参考资料 • Floyd判圈算法 { 链接 } • 单链表“环”.“环的起点”.环的长度”问题 { 链接 } 链表环的问题 一.判断链表有换 使用两个指针slow和fast.两个指针开始时均在头节点处 ...

  8. 微信WebView关闭后本地cookie无法清除问题

    问题背景 在微信WebView下的页面中登录后,关闭WebView返回后再次进入页面,发现登录态还存在,原因是微信不会主动清除cookie以及其他的缓存. 期望是关闭窗口后会清除cookie,重新进入 ...

  9. 记录weiye项目上线遇到的一些问题

    1.使用vpn访问客户内网 参考:http://jingyan.baidu.com/article/a3f121e4f9903cfc9052bb0b.html 2.设置使用ip地址直接访问项目(之后可 ...

  10. 安装Numpy方法

    Numpy安装(要先安装好python,见<windows下的python环境搭建(python2和python3不兼容,python2用的多)>) Numpy是Python的一个科学计算 ...