js处理局部scroll事件禁止外部scroll滚动解决办法,jquery.mousewheel.js处理时禁止办法说明
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处理时禁止办法说明的更多相关文章
- 扩展jquery scroll事件,支持 scroll start 和 scroll stop
		
效果预览: github: https://besswang.github.io/webapp-scroll/ 参考地址: http://www.ghugo.com/special-scroll-ev ...
 - JQuery弹出菜单时禁止页面(body)滚动
		
最近在做手机端的弹出菜单,但是菜单弹出来后滑动手机屏幕的话页面滚动总是会将菜单滑上去,体验非常不好,所以查了一下弹出菜单时禁止页面滚动的方法,整理如下: 方法一:弹出菜单时给body和html添加一个 ...
 - jQuery 鼠标滚轮插件 jquery.mousewheel.js
		
jQuery Mousewheel Plugin,用于添加跨浏览器的鼠标滚轮支持.mousewheel事件的处理函数有一点小小的变化,它除了第一个参数event 外,还接收到第二个参数delta.通过 ...
 - scroll事件实现监控滚动条并分页显示示例(zepto.js )
		
今天做了一个类似于手机端京东首页的页面,效果图如下: 刷新页面的时候,标题栏(也就是搜索栏),背景是透明的,当我们往下滑的时候,可以改变标题栏的背景透明度(渐变效果): 当标题栏滑过轮播图后,透明度就 ...
 - scroll事件实现监控滚动条改变标题栏背景透明度(zepto.js )
		
今天做了一个类似于手机端京东首页的页面,效果图如下: 刷新页面的时候,标题栏(也就是搜索栏),背景是透明的,当我们往下滑的时候,可以改变标题栏的背景透明度(渐变效果): 当标题栏滑过轮播图后,透明度就 ...
 - js调用.net后台事件,和后台调用前台等方法以及js调用服务器控件的方法
		
http://blog.csdn.net/deepwishly/article/details/6670942 ajaxPro.dll基础教程(前台调用后台方法,后台调用前台方法) 1. javaS ...
 - js鼠标移入移出事件会被子元素触发解决方法
		
问题:js写了一个鼠标移入移出事件,但是发现会被内部子元素不断的触发 解决方法:建立一个空的div定位到需要触发的位置,然后设置大小和触发范围一样,最后将事件写在空的div上.
 - scroll事件实现监控滚动条并分页显示示例(zepto.js)
		
scroll事件实现监控滚动条并分页显示示例(zepto.js ) 需求:在APP落地页上的底部位置显示此前其他用户的购买记录,要求此div盒子只显示3条半,但一页有10条,div内的滑动条滑到一页 ...
 - scroll事件的优化以及scrollTop的兼容性
		
scrollTop的兼容性 scroll事件,当用户滚动带滚动条的元素中的内容时,在该元素上面触发.<body>元素中包含所加载页面的滚动条. 虽然scroll事件是在window对象上发 ...
 
随机推荐
- sys模块python
			
sys模块 1: sys是python自带模块. 利用 import 语句输入sys 模块. 当执行import sys后, python在 sys.path 变量中所列目录中寻找 sys 模块文件. ...
 - 多页面应用 VS 单页面应用
			
多页面应用 每一次页面跳转,后端都会返回一个新的HTML文件, 优点:首屏时间快(只经历了一个HTTP请求),SEO效果好 缺点:页面切换慢 单页面应用 进行页面之间跳转时,并不去加载HTML文件,而 ...
 - highCharts使用记录
			
公司的架构师让我做一个mockup,要用到highCharts,,以前想接触的,没时间学习,也没有用过,正好工作可以用上了,可以边学边做了. 环境 <script src="./js/ ...
 - 20155322 2016-2017-2 《Java程序设计》第7周学习总结
			
20155322 2016-2017-2 <Java程序设计>第7周学习总结 教材学习内容总结 第七周学习的主要内容是课本的第十二第十三章: 第十二章主要内容: "Lambda ...
 - 20155213 2016-2017-2 《Java程序设计》第七周学习总结
			
20155213 2016-2017-2 <Java程序设计>第七周学习总结 教材学习内容总结 Lambda 如果使用JDK8的话,可以使用Lambda特性去除重复的信息. 在只有Lamb ...
 - phpexcel 导入导出excel表格
			
phpexcel中文实用手册 转载:http://www.cnblogs.com/freespider/p/3284828.html 下面是总结的几个使用方法 include 'PHPExcel.ph ...
 - POJ 3783 Balls  --扔鸡蛋问题 经典DP
			
题目链接 这个问题是谷歌面试题的加强版,面试题问的是100层楼2个鸡蛋最坏扔多少次:传送门. 下面我们来研究下这个题,B个鸡蛋M层楼扔多少次. 题意:给定B (B <= 50) 个一样的球,从 ...
 - 让PHPCms内容页支持JavaScript_
			
在PHPCms内容页中,出于完全考虑,默认是禁止JavaScript脚本的,所以我们在添加文章时,虽然加入了js代码,但实际上并没有起作用,而是以文本形式显示.如果要让内容页支持JavaScript, ...
 - Python概念-Item系列(林海峰教的)
			
这个Item系列是egon老师自创的,个人还是可以接受这种文化底蕴的,所以直接拿来用,也是毫无违和感的 所谓Attr系列,其实是__setattr__,__delattr__,__getattr__ ...
 - 阿里云CentOS下安装jdk
			
首先需要下载jdk: 由于oracle上的下载页面有跳转,直接用wget下载下来的只是html页面.可以用下面的命令: wget --no-cookies --no-check-certificate ...