做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. 关于BaseAdapter的使用及优化心得（一）

    对于Android程序员来说,BaseAdapter肯定不会陌生,灵活而优雅是BaseAdapter最大的特点.开发者可以通过构造BaseAdapter并搭载到ListView或者GridView这类 ...

  2. 【工具】openwrt安装记录

    步骤: 1  从以太网引导启动.由于我们实验室在服务器上放了一个openwrt镜像,安装时先从以太网启动,将服务器上的镜像载入到RAM中启动系统. 2  用SCP将在PC上编译好的openwrt-XX ...

  3. linux 操作

    正在运行的内核和系统信息 # uname -a # 获取内核版本(和BSD版本) # lsb_release -a # 显示任何 LSB 发行版版本信息 # cat /etc/SuSE-release ...

  4. DOM操作样式表及其兼容性

    DOM操作样式表的时候,存在很多浏览器兼容上的问题,测试的时候用的是Firefox 28.0.IE11.IE8.Chrome.测试的时候发现,不兼容问题基本上都是IE8和非IE浏览器之家的问题,很多I ...

  5. 【BZOJ】【3210】花神的浇花集会

    曼哈顿距离与切比雪夫距离 QAQ蒟蒻并不知道切比雪夫距离是什么……并不会做这道题…… 去膜拜了PoPoQQQ大爷的题解: 题目大意:给定平面上的n个点,求一个点到这n个点的切比雪夫距离之和最小 与31 ...

  6. eclipse中设置中文javadoc+如何查看class的中文javadoc

    一.  eclipse中设置中文javadoc 1.先到http://download.java.net/jdk/jdk-api-localizations/jdk-api-zh-cn/publish ...

  7. Leetcode#150 Evaluate Reverse Polish Notation

    原题地址 基本栈操作. 注意数字有可能是负的. 代码: int toInteger(string &s) { ; ] == '-' ? true : false; : ; i < s.l ...

  8. Leetcode#49 Anagrams

    原题地址 Anagram:变位词.两个单词是变位词关系的条件是:组成单词的字符相同,只是顺序不同 第一次看这道题看了半天没明白要干嘛,丫就不能给个样例输入输出么..后来还是看网上其他人的总结知道是怎么 ...

  9. 如何撰写SCI论文的讨论部分？——经典结构 – 俗称“倒漏斗型。

  10. UML对象图（转载）

    概述: 对象图都来源于类图,依赖类图对象图. 对象图表示一个类图的一个实例.类图和对象图的基本概念是相似的.对象图也代表了一个系统的静态视图,但这种静态视图是系统在某一时刻的一个快照. 对象图是用于呈 ...