做web开发经常会碰到需要获取浏览器的滚动条与顶部和底部的距离，然后做相应的处理动作。下面作者就如何通过js来获取浏览器滚动条距离浏览器顶部和底部的高度做一下分享，这个是同时兼容ie和firefox的。

获取窗口可视范围的高度

  1. function getClientHeight(){
  2. var clientHeight=0;
  3. if(document.body.clientHeight&&document.documentElement.clientHeight){
  4. var clientHeight=(document.body.clientHeight<document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;
  5. }else{
  6. var clientHeight=(document.body.clientHeight>document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;
  7. }
  8. return clientHeight;
  9. }

获取窗口滚动条高度

  1. function getScrollTop(){
  2. var scrollTop=0;
  3. if(document.documentElement&&document.documentElement.scrollTop){
  4. scrollTop=document.documentElement.scrollTop;
  5. }else if(document.body){
  6. scrollTop=document.body.scrollTop;
  7. }
  8. return scrollTop;
  9. }

获取文档内容实际高度

  1. function getScrollHeight(){
  2. return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
  3. }

这里是示例代码效果图：

下面是具体的示例代码，注意这里为了演示效果使用了固定悬浮框的效果，在ie下面固定悬浮效果与上面的代码有些冲突不起作用，这里不深究了，读者可以在firefox下面看效果，这个代码本身是没有问题的。

  1. <html xmlns="http://www.phpernote.com/javascript-function/754.html">
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <title>js获取滚动条距离浏览器顶部,底部的高度</title>
  5. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
  6. <script type="text/javascript">
  7. //取窗口可视范围的高度
  8. function getClientHeight(){
  9. var clientHeight=0;
  10. if(document.body.clientHeight&&document.documentElement.clientHeight){
  11. var clientHeight=(document.body.clientHeight<document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;
  12. }else{
  13. var clientHeight=(document.body.clientHeight>document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;
  14. }
  15. return clientHeight;
  16. }
  17. //取窗口滚动条高度
  18. function getScrollTop(){
  19. var scrollTop=0;
  20. if(document.documentElement&&document.documentElement.scrollTop){
  21. scrollTop=document.documentElement.scrollTop;
  22. }else if(document.body){
  23. scrollTop=document.body.scrollTop;
  24. }
  25. return scrollTop;
  26. }
  27. //取文档内容实际高度
  28. function getScrollHeight(){
  29. return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
  30. }
  31. window.onscroll=function(){
  32. var height=getClientHeight();
  33. var theight=getScrollTop();
  34. var rheight=getScrollHeight();
  35. var bheight=rheight-theight-height;
  36. document.getElementById('show').innerHTML='此时浏览器可见区域高度为：'+height+'<br />此时文档内容实际高度为：'+rheight+'<br />此时滚动条距离顶部的高度为：'+theight+'<br />此时滚动条距离底部的高度为：'+bheight;
  37. }
  38. function fixDiv(div_id,offsetTop){
  39. var offsetTop=arguments[1]?arguments[1]:0;
  40. var Obj=$('#'+div_id);
  41. var ObjTop=Obj.offset().top;
  42. var isIE6=$.browser.msie && $.browser.version == '6.0';
  43. if(isIE6){
  44. $(window).scroll(function(){
  45. if($(window).scrollTop()<=ObjTop){
  46. Obj.css({
  47. 'position':'relative',
  48. 'top':0
  49. });
  50. }else{
  51. Obj.css({
  52. 'position':'absolute',
  53. 'top':$(window).scrollTop()+offsetTop+'px',
  54. 'z-index':1
  55. });
  56. }
  57. });
  58. }else{
  59. $(window).scroll(function(){
  60. if($(window).scrollTop()<=ObjTop){
  61. Obj.css({
  62. 'position':'relative',
  63. 'top':0
  64. });
  65. }else{
  66. Obj.css({
  67. 'position':'fixed',
  68. 'top':0+offsetTop+'px',
  69. 'z-index':1
  70. });
  71. }
  72. });
  73. }
  74. }
  75. $(function(){fixDiv('show',5);});
  76. </script>
  77. </head>
  78. <body>
  79. <div style="height:500px;"></div>
  80. <div>http://www.phpernote.com/jquery/251.html</div>
  81. <div id="show"></div>
  82. <div style="height:2000px;"></div>
  83. </body>
  84. </html>

js获取滚动条距离浏览器顶部,底部的高度,兼容ie和firefox的更多相关文章

  1. JQ的offset().top与JS的getBoundingClientRect区别详解，JS获取元素距离视窗顶部可变距离

     壹 ❀ 引 我在 JQ的offset().top与js的offsetTop区别详解 这篇博客中详细分析了JQ方法offset().top与JS属性offsetTop的区别,并得出了一条offset( ...

  2. JS获取滚动条距离顶部高度

    一.jQuery获取的相关方法 jquery 获取滚动条高度 获取浏览器显示区域的高度 : $(window).height(); 获取浏览器显示区域的宽度 : $(window).width(); ...

  3. 如何获取div距离浏览器顶部的高度，宽度，内容

    JS就可以获取了, document.getElementById("DIV的ID或者其它选择").offsetTop;这是离顶部 JQ可以这样: $("#aaa&quo ...

  4. 获取DIV与浏览器顶部相聚一定位置之后移动DIV

    获取元素(这里定位元素A)距离顶部的高度,接着设定scroll滚动的事件,比如超过那个高度,把A的位置设定为fixed,小于该高度,修改回relative. 方法一: $(function() {  ...

  5. HTML 获取屏幕、浏览器、页面的高度宽度

    本篇主要介绍Web环境中屏幕.浏览器及页面的高度.宽度信息. 目录 1. 介绍:介绍页面的容器(屏幕.浏览器及页面).物理尺寸与分辨率.展示等内容. 2. 屏幕信息:介绍屏幕尺寸信息:如:屏幕.软件可 ...

  6. jquery设置滚动条距离页面顶部的高度

    //获取滚动条到顶部的垂直高度 $(document).scrollTop(); //获取滚动条到左边的垂直宽度 $(document).scrollLeft(); function clickFn( ...

  7. [转] HTML 获取屏幕、浏览器、页面的高度宽度

    本篇主要介绍Web环境中屏幕.浏览器及页面的高度.宽度信息. 目录 1. 介绍:介绍页面的容器(屏幕.浏览器及页面).物理尺寸与分辨率.展示等内容. 2. 屏幕信息:介绍屏幕尺寸信息:如:屏幕.软件可 ...

  8. HTML 获取屏幕，浏览器，页面的高度

    1,物理尺寸和分辨率 容器的尺寸是指当前分辨率下的高度.宽度,而不是物理高度.宽度. 如:一个22寸的显示器,屏幕分辨率为1366 * 768,那么获取到的屏幕高度为1366px,宽度为768px. ...

  9. javascript 获取滚动条距离顶部的位置(兼容所有的)。

    function getScrollTop() { var scrollPos; if (window.pageYOffset) { scrollPos = window.pageYOffset; } ...

随机推荐

  1. Android -- 浮动组建

    在开发Android应用时,加新功能是必不可少的,我们加入了新的功能,有的一看界面就可以看出来,但是有的新功能就比较隐蔽,也就是用户很难知道你添加了这个新功能,这个时候就需要用户在打开我们的应用时给出 ...

  2. String、StringBuilder、StringBuffer

    String                                                                                        String ...

  3. 为什么Linux的fdisk分区时第一块磁盘分区的First Sector是2048？

    这个问题曾经困扰我很久,在了解了MBR之后,我曾认为第一块分区之前为一个block.但是用fdisk查看是2048,一直不了解其中的缘由,今天查了一下资料,大概了解了,其中的细节留着慢慢去了解. 最直 ...

  4. Linux设置：环境变量

    一.在相关配置文件中添加可执行文件/头文件/静态库/动态库的搜索路径 对所有用户有效在/etc/profile添加. 只对当前用户有效在Home目录下的.bashrc或.bash_profile里添加 ...

  5. android 开发怎么让程序生成的图片文件不会被系统扫描到

    我们在写应用的时候,可能会保存很多图片,大的小的,仅仅是我们的应用中会用到,处于种种原因不希望用户看到,我是觉着如果被用户看到了,就失去了我的应用的那一层神秘的面纱,用户是米有闲情逸致去打开你一层层的 ...

  6. Vue2.0 vue-source.js jsonp demo vue跨域请求

    以调用百度的输入提示接口为例 ===================================================================================== ...

  7. windows python 打印utf-8乱码

    从网上抓了一些字节流,想打印出来结果发生了一下错误: UnicodeEncodeError: 'gbk' codec can't encode character '\xbb' in position ...

  8. 【转载】Extjs 中id与itemId的区别

    为了方便表示或是指定一个组件的名称,我们通常会使用id或者itemId进行标识命名.(推荐尽量使用itemId,这样可以减少页面唯一标识而产生的冲突) id:        id是作为整个页面的Com ...

  9. centos mysql 操作

    安装mysqlyum -y install mysql-server 修改mysql配置 vi /etc/my.cnf 这里会有很多需要注意的配置项,后面会有专门的笔记 暂时修改一下编码(添加在密码下 ...

  10. 二维码（支持arc,苹果自带扫描，zbar扫描，二维码生成）

    下载地址:http://pan.baidu.com/s/1mgvJzyo