scroll事件在IE,chrome,FF中的行为表现

周末想做一个滚动加载图片的效果。在IE,chrome,FF中验证时,忽然发现了一个有趣的问题。

问题是这样的:

1.     我发现鼠标滚动一次,scroll事件的处理函数执行的次数不一样。

2.     滚动的距离也不一样。

3.     点击滚动条滚动时,执行次数,滚动距离也不一样。

经过验证:

       执行次数:

在IE5,6,7,8下,滚动一次,函数执行4次;

在IE9,10以上版本执行1次;

在chrome下,只执行一次。(chrome版本号:34.0.1847.116 m)

在FF下,居然执行了16-17次;(FF版本号:28.0)

如下图所示:



滚动的距离:

在IE5,6,7,8下,滚动一次,约为17-18px;

在IE9,10以上版本,滚动一次,约为35px左右;

在chrome下,滚动一次,100px,不存在误差,除非最后一次滚动时,距离顶部或者底部的距离小于100px;

FF下,滚动一次约为107px左右;

如下图所示:



点击滚动:

在IE5,6,7,8下,点击一次,执行8次,滚动总距离约为22px;

在IE9,10以上版本,点击一次,执行1次,滚动总距离约为25px左右;

在chrome下,点击一次,执行1次,滚动总距离40px,不存在误差;

在FF下,点击一次,执行7次,滚动总距离约为50px;

 

如下图所示:



相关测试代码如下:

 window.onload = function () {
	    	var pWdith = 530;//图片的高度
	    	var oldScrollValue = 0;
	    	var MaxScrollValue = 0;
	    	if(window.addEventListener){
	    		window.addEventListener("scroll", scrollHandler, false);
	    	} else {
	    		window.attachEvent("onscroll", scrollHandler, false);
	    	}
	    	function scrollHandler(event) {
	    		var scrollTopValue = document.body.scrollTop;
	    		if (document.documentElement.scrollTop) {
	    			scrollTopValue = document.documentElement.scrollTop;
	    		}
	    		MaxScrollValue = scrollTopValue;
	    		console.log("scrollHandler:" + MaxScrollValue);
	    	}
	    }
时间: 2024-08-06 15:51:46

scroll事件在IE,chrome,FF中的行为表现的相关文章

【js】IE、FF、Chrome浏览器中的JS差异介绍

如何判断浏览器类型 转:http://www.cnblogs.com/carekee/articles/1854674.html 1.通过浏览器特有的对象 如ie 的ActiveXObject  ff 的getBoxObjectFor  opera 的window.opera  safari 的openDatabase  Chrome 的MessageEvent有趣的是,Chrome的userAgent还包含了Safari的特征,也许这就是Chrome可以运行所有Apple浏览器应用的基础吧 2

javascript中的scroll事件

window.addEventListener('scroll',function(){ if(document.compatMode == "CSS1Compat") { alert(document.documentElement.scrollTop); } else { alert(document.body.scrollTop); } },false); 虽然scroll事件是在window对象上发生的,但它事件表示的则是页面中相应元素的变化.在混杂模式中,可以通过<bo

Javascript事件冒泡,没有想象中那么糟糕

Javascript事件冒泡,没有想象中那么糟糕  提到js事件,我们可能第一时间反应的就是“如何阻止事件冒泡”:但是事件冒泡真的是如我们想象的那么糟糕吗? 1. Event 对象  Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态. 2. 事件句柄 (Event Handlers)  指能够使 HTML 事件触发浏览器中的行为,比如点击(onclick).鼠标悬浮(onfocus)等 3. 什么是事件冒泡  一个对象(event.srcEle

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

scroll事件实现监控滚动条并分页显示示例(zepto.js  ) 需求:在APP落地页上的底部位置显示此前其他用户的购买记录,要求此div盒子只显示3条半,但一页有10条,div内的滑动条滑到一页底部自动加载下一页并发加载埋点. 实现:首先理解三个概念,分别是contentH,viewH,scrollTop. contentH:即所要滑动的元素内容的高度,包括可见部分以及滚动条下面的不可见部分. ViewH:即我们看到的这个DIV的高度,不包括可见部分也不包括滚动条下面的不可见部分. scr

“如何稀释scroll事件”引出的问题

背景:我在segmentfault提了个问题如何稀释onscroll事件,问题如下: 面试时问到这个问题,是这样的:    面试官问一个关于滚动到某个位置的时候出现一个顶部的导航栏,答完之后,她接着问一滚动onscroll就会执行很多很多次,如何稀释它?为了确定她说的是“稀释”,我让她重复了遍,我给出的解决方法是,用一个变量,在事件处理的时候让它自增,判断达到一定大小就执行一次实际的事件: var i = 0; // 累积变量 window.onscroll = function(){ i++;

Juploader 1.0 谷歌(chrome)浏览器中成功上传文件后返回信息异常

在项目中使用了Juploader 1.0无刷新上传文件的js组件,在IE8以上没有问题,代码如下: function InitialUploadDirectly(OnUploadFunc, buttonID, allowedExts) { $.jUploader({ button: buttonID, // 这里设置按钮id eventType: 1, //触发类型 addeventbutton: buttonID, // 要绑定事件的元素的id filenamed: buttonID + 'd

【F12】chrome浏览器中 F12 功能的简单介绍

chrome浏览器中 F12 功能的简单介绍 由于F12是前端开发人员的利器,所以我自己也在不断摸索中,查看一些博客和资料后,自己总结了一下来帮助自己理解和记忆,也希望能帮到有需要的小伙伴,嘿嘿! 首先介绍Chrome开发者工具中,调试时使用最多的三个功能页面是:元素(ELements).控制台(Console).源代码(Sources),此外还有网络(Network)等. 元素(Elements):用于查看或修改HTML元素的属性.CSS属性.监听事件.断点等. 控制台(Console):控制

Scroll事件不能取消冒泡问题

mdn上写了,scroll事件冒泡并不能被取消:https://developer.mozilla.org/en-US/docs/Web/API/Document/scroll_event 我当前遇到一个业务就是,在h5页面内,整个页面需要支持上下滑(touchstart/touchmove/touchend,changePage())切换页面,又要支持页面内某个区域内(scrollRegion)可以滚动(scroll)查看list. 一旦scroll,一定会被冒泡到touchstart/tou

Chrome浏览器中onunload有时候没反应怎么办

Chrome浏览器中,onunload事件触发后,alert()和confirm()等对话框不允许再弹出,直接用return返回内容就好了 onunload换成onbeforeunload 使用 window.onbeforeunload = han; function han() { return "您确定要离开吗?"; } 原文地址:https://www.cnblogs.com/caimengting/p/11865679.html