onsrcoll和scrollTop兼容与实现
对于onscroll事件的支持
各浏览器 document、document.body、document.documentElement 对象的 onscroll 事件的支持存在差异。
所谓的支持性存在差异就是我们常说的浏览器兼容性问题,就是说,对于不同浏览器可能不会按照预期触发相应的事件处理函数。
IE6 | IE7 | IE8 | Firfox | Chrome | Safari | Opera | ||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Q | S | Q | S | Q | S | Q | S | Q | S | Q | S | Q | S | |
window 对象 | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y |
div 对象 | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y |
document 对象 | N | N | N | N | N | N | Y | Y | Y | Y | Y | Y | N | N |
document.body 对象 | Y | N | Y | Y | Y | N | N | N | N | N | N | N | Y | Y |
document.documentElement 对象 | N | Y | N | Y | N | Y | N | N | N | N | N | N | N | N |
所有浏览器支持window对象和普通Div对象的scroll事件。但是要保证窗口或这是Div中出现滚动条才能触发滚动事件。
IE(S)不支持document对象scroll事件,对于如下代码,IE浏览器下不会有任何输出:
<script type="text/javascript">
window.onload = function() {
document.onscroll = function() {
document.getElementById("info").innerHTML = 'OK';
};
}
</script>
<div id="info" style="height:3000px;"></div>
支持性如下:
IE6(S) IE8(S) Firefox Chrome Safari | IE6(Q) IE7 IE8(Q) Opera | |
---|---|---|
document.body.onscroll | 无内容输出 | OK |
相反,IE浏览器支持document.documentElement对象scroll事件,而对于其他浏览器不会有任何输出:
<script type="text/javascript">
window.onload = function() {
document.documentElement.onscroll = function() {
document.getElementById("info").innerHTML = 'OK';
};
}
</script>
<div id="info" style="height:3000px;"></div>
支持性如下:
IE6(S) IE7(S) IE8(S) | IE6(Q) IE7 IE8(Q) Opera Firefox Chrome Safari | |
---|---|---|
document.documentElement.onscroll | OK | 无内容输出 |
但是上述方法都需要浏览器窗口出现滚动条,如果浏览器内部div出现滚动条怎么办?
可以监听鼠标滚动事件:
不同浏览器有不同的滚轮事件,主要是两种,onmousewheel(ff不支持)和DOMMouseScroll(只有ff支持):
if(document.addEventListener){
document.addEventListener(‘DOMMouseScroll’,scrollFunc,false);
}//W3C
window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome
判断鼠标上滑or下滑:
function scrollFunc(e){
e=e || window.event;
if(e.wheelDelta){//IE/Opera/Chrome
console.info(e.wheelDelta);
}else if(e.detail){//Firefox
console.info(e.detail);
}
}
如果为负数,则是下滑;如果是正数,则是上滑。
scrollTop,是已经滚动过的高度,scrollHeight是整个滚动的高度,
从开始到滚动结束 滚动过的高度,包括滚动元素自身的高度。
contentContainer的scrollTop为a,scrollHeight为b。
监听整个网页的滚动事件,正如上面所说的onscroll实现方法,但是要注意保持兼容性。
现在我们重温一下基础知识,很多时候,我们需要获取body视口高度:在保证完整的<!doctype...声明的前提下,获取body的视口高度为:document.documentElement.clientHeight;
对于要判断div时候滚动到底部,其实只需要判断div已经滚动的 过的距离scrollTop+自己本身的高度offsetHeight是否大于这个div本身的高度:
this.scrollTop+this.offsetHeight>=this.scrollHeight
判断body的滚动条是否滚动 到底部:
window.onscroll=function(){
var scrolltop=Math.max(document.documentElement.scrollTop,document.body.scrollTop);
if(scrolltop+document.documentElement.clientHeight>=document.documentElement.scrollHeight)
alert( 'nowbottom' );
};
更多关于scrollTop的兼容性问题,可以查看:http://www.75team.com/archives/128
onsrcoll和scrollTop兼容与实现的更多相关文章
- input屏蔽历史记录 ;function($,undefined) 前面的分号是什么用处 JSON 和 JSONP 两兄弟 document.body.scrollTop与document.documentElement.scrollTop兼容 URL中的# 网站性能优化 前端必知的ajax 简单理解同步与异步 那些年,我们被耍过的bug——has
input屏蔽历史记录 设置input的扩展属性autocomplete 为off即可 ;function($,undefined) 前面的分号是什么用处 ;(function($){$.ex ...
- 获取scrollTop兼容各浏览器的方法,以及body和documentElement
1.各浏览器下 scrollTop的差异 IE6/7/8: 对于没有doctype声明的页面里可以使用 document.body.scrollTop 来获取 scrollTop高度 : 对于有do ...
- 【转】获取scrollTop兼容各浏览器的方法,以及body和documentElement是啥?
1.各浏览器下 scrollTop的差异 IE6/7/8: 对于没有doctype声明的页面里可以使用 document.body.scrollTop 来获取 scrollTop高度 : 对于有do ...
- scrollTop兼容处理
使用jQuery2.0以下版本的scrollTop()函数来设置当然兼容性当然很好,但有时需要为滚动设置滑动效果.比如,使用animate函数,这里需要做些兼容性处理: 实例:http://sandb ...
- 关于scrolltop 兼容 IE6/7/8, Safari,FF的方法
1.各浏览器下 scrollTop的差异IE6/7/8:对于没有doctype声明的页面里可以使用 document.body.scrollTop 来获取 scrollTop高度 :对于有docty ...
- document.body.scrollTop与document.documentElement.scrollTop兼容
这两天在写一个JS的网页右键菜单,在实现菜单定位的时候发现了这个问题:chrome居然不认识document.documentElement.scrollTop! 看前辈们的文章,纷纷表示如果有文档声 ...
- scrollTop兼容封装
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- scrollTop 值为 0
由scrollTop兼容问题引起: 在 Firefox 和 IE 中,使用 document.documentElement.scrollTop 获取: 在 Chrome 中,使用 document. ...
- js,jQuery实现可关闭悬浮框广告特效,兼容(谷歌,火狐,Ie)
注意不能直接用close()命名关闭广告函数,避免冲突. javascript实现方法: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tr ...
随机推荐
- 文件Move操作
#coding=utf-8 import os import shutil stra = "G:/should/v3/a" strb = "G:/should/v3/b& ...
- Spring框架的事务管理之基于AspectJ的注解方式(重点掌握,最简单的方式)
1. 步骤一:恢复转账的开发环境(具体开发环境实现见:https://www.cnblogs.com/wyhluckdog/p/10137283.html)2. 步骤二:applicationCont ...
- sql嵌套更新
原地址:http://blog.csdn.net/ycb1689/article/details/43834445 方法一: update a set HIGH=b.NEW from SPEC1 a ...
- svn.SvnX
1. 使用SvnX的入门 http://www.divvun.no/doc/tools/docu-svn-user-svnx.html 2. SvnX的代码 https://code.google.c ...
- Reactor 模型(一)基本并发编程模型
Reactor 模型(一)基本并发编程模型 Netty 系列目录 (https://www.cnblogs.com/binarylei/p/10117436.html) 在讲解 Reactor 线程模 ...
- stl string 使用指定的分隔符分割成数个子字符串
#include <iostream> #include <vector> #include <string> #include <algorithm> ...
- python之数据类型1
什么是数据类型及数据类型分类 python中的数据类型 python使用对象模型来存储数据,每一个数据类型都有一个内置的类,每新建一个数据,实际就是在初始化生成一个对象,即所有数据都是对 ...
- 2018.10.14 loj#6003. 「网络流 24 题」魔术球(最大流)
传送门 网络流好题. 这道题可以动态建图. 不难想到把每个球iii都拆点成i1i_1i1和i2i_2i2,每次连边(s,i1),(i2,t)(s,i_1),(i_2,t)(s,i1),(i2, ...
- 2018.08.28 洛谷P3345 [ZJOI2015]幻想乡战略游戏(点分树)
传送门 题目就是要求维护带权重心. 因此破题的关键点自然就是带权重心的性质. 这时发现直接找带权重心是O(n)的,考虑优化方案. 发现点分树的树高是logn级别的,并且对于以u为根的树,带权重心要么就 ...
- 41 Pain and Pain Management 疼痛与疼痛管理
Pain and Pain Management 疼痛与疼痛管理 ①Years ago,doctors often said that pain was a normal part of life.I ...