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

原创 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。所以这个应该是包括滚动条的。

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

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

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

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

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

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

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

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

废话不多说,直接上demo,最下面有详细注释。 1、这是在webkit浏览器下显示的样式。            (个人比较喜欢简约点的) 2、在IE浏览器下显示的样式(为了区分...
  • zh_rey
  • zh_rey
  • 2017年05月18日 16:33
  • 12636

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

Html代码 全称 简称 地址 销售量 ...
  • qadada
  • qadada
  • 2014年02月25日 23:09
  • 6069

selenium之 兼容所有浏览器滚动条滚动的js

很多人发现写的js操作滚动条的代码只能控制firefox的滚动条,而chrome则不吊你;好不容易chrome能动了,firefox又不理你了。简直是坑的一比。那有没有兼容firefox、chrome...
  • huilan_same
  • huilan_same
  • 2016年08月31日 17:27
  • 3657

div隐藏滚动条仍保留滚动效果,兼容IE,FF,Webkit 和 O

需求:一个可以滚动内容的div,超出高度隐藏内容,但是要保留滚动效果又不出现滚动条,同时兼容各种浏览器。 思路: 1.假设这个div叫做scroll_content,规定width和height。 2...
  • qq_2842405070
  • qq_2842405070
  • 2017年04月19日 11:54
  • 5975

固定层不随滚动条滚动而滚动(纯CSS,兼容IE6,IE7,IE8,Firefox,Safari)

使用CSS来固定层,此层不随滚动条滚动而滚动,固定层分三个位置: 页面顶端:   页面中央:   页面底层:     StaticContent.css文件: /****...
  • lovegonghui
  • lovegonghui
  • 2015年11月03日 17:02
  • 327

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

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

JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome

今天为大家分享一下我自己制作的浏览器滚动条,我们知道用css来自定义滚动条也是挺好的方式,css虽然能够改变chrome浏览器的滚动条样式可以自定义,css也能够改变IE浏览器滚动条的颜色。但是css...
  • wswq1125
  • wswq1125
  • 2017年01月06日 08:39
  • 445
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:浏览器滚动条的兼容性问题
举报原因:
原因补充:

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