浏览器滚动条的兼容性问题

原创 2016年06月01日 19:41:47

通用的属性window.pageXoffset,window.pageYoffset.(ie8以下版本不支持)

ie,火狐下:

document.body.scrollTop:0

document.documentElement.scrollTop:x

chrome:

document.body.scrollTop:x

document.documentElement.scrollTop:0

关于滚动条兼容性的用法scrollTop=window.pageYoffset || (document.body.scrollTop+document.documentElement.scrollTop)

document.body.clientHeight代表整个body的高度,而不仅仅是可见区域。

document.documentElement.clientHeight,可见区域的高度,出现滚动条的时候也是可见区域高度,而不是整个body的高度。

window.innerHeight可见区域的高度,网上说不包括滚动条高度,但是测试下发现是包括的,后来查了一下MDN,是这么说的Height (in pixels) of the browser window viewport including, if rendered, the horizontal scrollbar。所以这个应该是包括滚动条的。

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

自定义浏览器滚动条的样式,打造属于你的滚动条风格——兼容IE和webkit(ff不支持)

前段时间,到网上找素材时,看到了一个很个性的滚动条式,打开Chrome的调试工具看了一下,发现不是用JavaScript来模拟实现的,觉得 有必要折腾一下。于是在各大浏览器中对比了一下,发现只用Chr...

解决IE8下的一些兼容性问题

1.使用meta标签调节浏览器的渲染方式,告诉浏览器用哪种内核渲染,360双核浏览器就是在ie和chrome之间来回切换,帮我们判断使用webkit还是chrome。 使用meta标签来强制IE8使...

自定义滚动条(原生,兼容ie8以上)

本人在做前端项目的时候经常会遇到使用到滚动条元素的情况,但是浏览器的自定义存在兼容问题,且不能满足我们开发一个外观漂亮的带滚动条的元素。虽然网上也有jq插件,但反应存在性能问题。 经过本人的测试观察,...
  • SkyGst
  • SkyGst
  • 2017年01月23日 18:48
  • 1190

各浏览器中自定义滚动条的样式

webkit浏览器css设置滚动条: 1 2 3 4 5 6 7 ::-webkit-scrollbar ...

CSS设置滚动条样式(兼容IE)

废话不多说,直接上demo,最下面有详细注释。 1、这是在webkit浏览器下显示的样式。 2、在IE浏览器下显示的样式(为了区分所以样式写的不一样,我没找到IE下设置滚动条宽高的方法) ...
  • zh_rey
  • zh_rey
  • 2017年05月18日 16:33
  • 3779

自定义IE浏览器滚动条样式

自定义IE浏览器滚动条样式 原文地址:http://www.cnblogs.com/koleyang/p/5484922.html 追溯浏览器对滚动条的自定义,恐怕最早的就是IE浏览器了(好像...

记录css自定义滚动条遇到的兼容性问题

CSS3自定义滚动条样式 -webkit-scrollbar 相关参数: ::-webkit-scrollbar 滚动条整体部分 ::-webkit-scrollbar-th...

CSS3自定义滚动条样式 -webkit-scrollbar

有没有觉得浏览器自带的原始滚动条很不美观,同时也有看到很多网站的自定义滚动条显得高端,就连chrome32.0开发板都抛弃了原始的滚动条,美观多了。那webkit浏览器是如何自定义滚动条的呢? ...

marquee 的浏览器兼容性

marquee 在IE,firefox,chrome 下都能正常的实现走马灯效果,兼容性没有问题
  • ISaiSai
  • ISaiSai
  • 2014年08月25日 07:13
  • 7602

标准ie8下,出现滚动条,但是没有滚动块的解决方法

Html代码 全称 简称 地址 销售量 ...
  • qadada
  • qadada
  • 2014年02月25日 23:09
  • 5692
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:浏览器滚动条的兼容性问题
举报原因:
原因补充:

(最多只允许输入30个字)