做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. asp.net webservice 返回json数据乱码解决方法

    [WebMethod] public void QueryRiskNotice(string phone) { try { var data = _riskNoticeDal.QueryRiskNot ...

  2. MySQL 主从数据库设置

    1.复制的介绍 MySQL 支持单向.异步复制,复制过程中一个服务器充当主服务器,而一个或多个其它服务器充当从服务器.主服务器将更新写入二进制日志文件,并维护文件的一个索引 以跟踪日志循环.这些日志可 ...

  3. android 开发对gif解码（适配android 4.2、4.3、4.4版本）

    android 开发对gif解码(适配android 4.2.4.3.4.4版本) 使用方法: public class ImageInputActivity extends Activity imp ...

  4. 【Search Insert Position 】cpp

    题目: Given a sorted array and a target value, return the index if the target is found. If not, return ...

  5. 【Construct Binary Tree from Preorder and Inorder Traversal】cpp

    题目: Given preorder and inorder traversal of a tree, construct the binary tree. Note:You may assume t ...

  6. 增强学习————K-摇臂赌博机

    探索与利用增强学习任务的最终奖赏是在多步动作之后才能观察到,于是我们先考虑最简单的情形:最大化单步奖赏,即仅考虑一步操作.不过,就算这样,强化学习仍与监督学习有显著不同,因为机器要通过尝试来发现各个动 ...

  7. python 交换变量值

    在其他语言中,交换两个变量值的时候,可以这样写: temp = a a = b b = temp 在Python中,我们可以简单的这样写: a,b=b,a 实验如下: >>> a=1 ...

  8. JS 学习笔记--13---原型

    练习中使用的是IE11,如果有错误之处,还请各位朋友多多指教.本文关于原型难以描述,故多用代码展示 原型是JS中一个很重要的概念,也是JS中一个难点,语言上难以描述,原型对象的属性和方法叫做原型属性和 ...

  9. iOS 开发中的问题

    错误提示: Your build settings specify a provisioning profile with the UUID “39642B69-0278-4265-8392-4B28 ...

  10. DEVICE DRAW VERTEX BUFFER TOO SMALL

    D3D11 WARNING #356 这个傻warning的意思看起来是说vertex buffer 太小了 描述是这样的: Vertex Buffer at the input vertex slo ...