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.οnscrοll=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

转载于:https://www.cnblogs.com/0603ljx/p/4972784.html

onsrcoll和scrollTop兼容与实现相关推荐

浏览器兼容问题及解决方法
出现浏览器兼容问题,主要是由于浏览器内核不相同. 对于浏览器兼容问题,总结为HTML.JavaScript兼容,CSS兼容. HTML相关问题易处理,无非高版本浏览器用了低版本浏览器无法识别元素,导致 ...
js中 scrollHeight、clientHeight、scrollTop的理解
前段时间,自己手写了一个滚动触底加载数据的功能.当时由于时间紧迫,所以也就只是在网上找了一段代码贴上去.也没有很深入的去研究.今天有空,所以自己特意去研究了下它的原理. 滚动触底加载数据,之前我也有写 ...
ie中常见的js语法兼容问题
参数e表示事件 1.获取滚动距离:滚动条 document.documentElement.scrollTop || document.body.scrollTop document.document ...
onscroll监听不生效，scrollTop一直为0
监听滚动不生效 window.onscroll = xxxx 不生效不触发滚动监听 window.addEventListener('scroll', () => { console.warn ...
移动端与pc端的区别及 ios的兼容性问题
前言:这里移动端主要指 hybrid app 中的H5页面.app 中对页面样式和功能的需求会更精细一点. 1.适配: 手机端的尺寸多样,3.5英寸的 iPhone4应该是最小的,只要考虑兼容到 ...
jquery 当页面图片加载之后_图片的懒加载和预加载
一.懒加载 [1.1]什么是懒加载? 懒加载也就是延迟加载,指的是在长网页中延迟加载图像,是一种很好优化网页性能的方式.当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替换成一张大小为1 ...
JavaScript面试题汇总
JavaScript 面试题汇总 1. 根据下面 ES6 构造函数的书写方式,要求写出 ES5 的 class Example { constructor(name) { this.name = na ...
JavaScript 面试题汇总
JavaScript 面试题汇总 1. 根据下面 ES6 构造函数的书写方式,要求写出 ES5 的 class Example { constructor(name) { this.name = na ...
前端知识-JavaScript事件驱动特性
事件驱动3特征绑定事件 ele.addEventListener('click',function(){});//IE9级以上 ele.attachEvent('on'click',function ...

onsrcoll和scrollTop兼容与实现

onsrcoll和scrollTop兼容与实现相关推荐

最新文章

热门文章