js Code:

<script>
window.onload = function() {
for (i = 0; i < 500; i++) {
var x = document.createElement('div');
x.innerHTML = "换行<br/>";
document.body.appendChild(x);
}
function $(x) {
return document.getElementById(x);
};
$("wrap").onmousewheel = function scrollWheel(e) {
var sl;
e = e || window.event;
if (navigator.userAgent.toLowerCase().indexOf('msie') >= 0) {
event.returnValue = false;
} else {
e.preventDefault();
};
if (e.wheelDelta) {
sl = e.wheelDelta;
} else if (e.detail) {
sl = -e.detail;
};
if (sl < 0) {
var x = parseInt($("he").innerHTML);
x++;
$("he").innerHTML = x;
} else {
var x = parseInt($("he").innerHTML);
x--;
$("he").innerHTML = x;
};
};
if (navigator.userAgent.toLowerCase().indexOf('firefox') >= 0) {
//firefox支持onmousewheel
addEventListener('DOMMouseScroll',
function(e) {
var obj = e.target;
var onmousewheel;
while (obj) {
onmousewheel = obj.getAttribute('onmousewheel') || obj.onmousewheel;
if (onmousewheel) break;
if (obj.tagName == 'BODY') break;
obj = obj.parentNode;
};
if (onmousewheel) {
if (e.preventDefault) e.preventDefault();
e.returnValue = false; //禁止页面滚动
if (typeof obj.onmousewheel != 'function') {
//将onmousewheel转换成function
eval('window._tmpFun = function(event){' + onmousewheel + '}');
obj.onmousewheel = window._tmpFun;
window._tmpFun = null;
};
// 不直接执行是因为若onmousewheel(e)运行时间较长的话,会导致锁定滚动失效,使用setTimeout可避免
setTimeout(function() {
obj.onmousewheel(e);
},1);
};
},
false);
};
}
</script>
<div id="wrap" style="position:absolute;left:100px;top:0px;background:#ccc;width:300px;height:300px;">
<h1 id="he" style="text-align:center;width:100%;color:#f00;">0</h1>
鼠标移动这里,转动滚轮,尽情的调戏吧!
鼠标移出这里,转动滚轮,看看它的反应!
</div>

jquery code:
前提:加载了jquery的mousewheel插件。
代码如下:

$(function(){
$('.timeline').mousewheel(function (event, delta) {
if (delta > 0) {
$(this).css('backgroundColor', 'red');
} else {
$(this).css('backgroundColor', 'blue');
}
return false; //return false即可
});
})

js处理局部scroll事件禁止外部scroll滚动解决办法,jquery.mousewheel.js处理时禁止办法说明的更多相关文章

  1. 扩展jquery scroll事件,支持 scroll start 和 scroll stop

    效果预览: github: https://besswang.github.io/webapp-scroll/ 参考地址: http://www.ghugo.com/special-scroll-ev ...

  2. JQuery弹出菜单时禁止页面(body)滚动

    最近在做手机端的弹出菜单,但是菜单弹出来后滑动手机屏幕的话页面滚动总是会将菜单滑上去,体验非常不好,所以查了一下弹出菜单时禁止页面滚动的方法,整理如下: 方法一:弹出菜单时给body和html添加一个 ...

  3. jQuery 鼠标滚轮插件 jquery.mousewheel.js

    jQuery Mousewheel Plugin,用于添加跨浏览器的鼠标滚轮支持.mousewheel事件的处理函数有一点小小的变化,它除了第一个参数event 外,还接收到第二个参数delta.通过 ...

  4. scroll事件实现监控滚动条并分页显示示例(zepto.js )

    今天做了一个类似于手机端京东首页的页面,效果图如下: 刷新页面的时候,标题栏(也就是搜索栏),背景是透明的,当我们往下滑的时候,可以改变标题栏的背景透明度(渐变效果): 当标题栏滑过轮播图后,透明度就 ...

  5. scroll事件实现监控滚动条改变标题栏背景透明度(zepto.js )

    今天做了一个类似于手机端京东首页的页面,效果图如下: 刷新页面的时候,标题栏(也就是搜索栏),背景是透明的,当我们往下滑的时候,可以改变标题栏的背景透明度(渐变效果): 当标题栏滑过轮播图后,透明度就 ...

  6. js调用.net后台事件,和后台调用前台等方法以及js调用服务器控件的方法

    http://blog.csdn.net/deepwishly/article/details/6670942  ajaxPro.dll基础教程(前台调用后台方法,后台调用前台方法) 1. javaS ...

  7. js鼠标移入移出事件会被子元素触发解决方法

    问题:js写了一个鼠标移入移出事件,但是发现会被内部子元素不断的触发 解决方法:建立一个空的div定位到需要触发的位置,然后设置大小和触发范围一样,最后将事件写在空的div上.

  8. scroll事件实现监控滚动条并分页显示示例(zepto.js)

    scroll事件实现监控滚动条并分页显示示例(zepto.js  ) 需求:在APP落地页上的底部位置显示此前其他用户的购买记录,要求此div盒子只显示3条半,但一页有10条,div内的滑动条滑到一页 ...

  9. scroll事件的优化以及scrollTop的兼容性

    scrollTop的兼容性 scroll事件,当用户滚动带滚动条的元素中的内容时,在该元素上面触发.<body>元素中包含所加载页面的滚动条. 虽然scroll事件是在window对象上发 ...

随机推荐

  1. HashMap源码分析-基于JDK1.8

    hashMap数据结构 类注释 HashMap的几个重要的字段 hash和tableSizeFor方法 HashMap的数据结构 由上图可知,HashMap的基本数据结构是数组和单向链表或红黑树. 以 ...

  2. bzoj千题计划130:bzoj1305: [CQOI2009]dance跳舞

    http://www.lydsy.com/JudgeOnline/problem.php?id=1305 每个人拆为喜欢(yes)和不喜欢(no)两个点 二分答案 1.每两个人之间只能跳一次 喜欢则 ...

  3. 2017 清北济南考前刷题Day 5 afternoon

    期望得分:100+100+30=230 实际得分:0+0+0=30 T1 直接模拟 #include<cstdio> #include<iostream> using name ...

  4. Git之初始化及提交操作

    Git 的配置文件有三个: Git 把管理的文件分为了两个区域四个状态: 工作区: 当前开发程序所在目录称为工作区,该区域的文件会有状态的变化且状态由 git自动检测,程序中文件做任何操作(增.删.改 ...

  5. Django 2.0.1 官方文档翻译: 编写你的第一个 Django app,第五部分(Page 10)

    编写你的第一个 Django app,第五部分(Page 10)转载请注明链接地址 我们继续建设我们的 Web-poll 应用,本节我们会为它创建一些自动测试. 介绍自动测试 什么是自动测试 测试是简 ...

  6. Java并发编程原理与实战三十一:Future&FutureTask 浅析

    一.Futrue模式有什么用?------>正所谓技术来源与生活,这里举个栗子.在家里,我们都有煮菜的经验.(如果没有的话,你们还怎样来泡女朋友呢?你懂得).现在女票要你煮四菜一汤,这汤是鸡汤, ...

  7. nodejs压缩

    在express中要用到压缩,把某一个文件夹压缩成zip,再返回到客户端提供下载. 用archiver库 var Archiver = require('archiver') router.get(' ...

  8. windows下安装pip和easy_install

    1. 从这里下载 get-pip.py: https://raw.githubusercontent.com/pypa/pip/master/contrib/get-pip.py 2. python ...

  9. 当python模式遇见cedet

    TAG: emacs, python, cedet, semantic, ctags DATE: 2013-08-20 我用Emacs 24写python程序. 发现屏幕不时有些闪动,MiniBuff ...

  10. iOS程序启动过程笔记

    CHENYILONG Blog 笔记 一.iOS程序的完整启动过程(有storyboard)1.先执行main函数,main内部会调用UIApplicationMain函数 2.UIApplicati ...