做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. 小组开发项目NABC分析

    我们团队的开发项目为:重量解锁 是根据重力感应实现手机的解锁方式,在传统滑屏的基础上我们想增添新的形式,实现用户用一组动作就能实现手机解锁功能,更加方便,炫酷. NABC模型 1.N:我们的创意在使用 ...

  2. Netsharp快速入门(之16) Netsharp基础功能(权限管理)

    第5章     Netsharp基础功能 5.1     权限配置 5.1.1  功能权限 1.配置权限功能点,打开平台工具-基础业务-操作管理 2.选择资源节点为销售订单,点添加常用操作,添加完成后 ...

  3. LightOJ 1140 How Many Zeroes

    题意:写出一个给定区间的每个数,求出一共写了多少个零. 解法:数位DP,定义dp[len][flag][num]:len的定义为数位的长度,flag定义为前导0和没有前导0的两种状态,num定义为写的 ...

  4. 【BZOJ】【3156】防御准备

    DP/斜率优化 斜率优化的裸题…… sigh……又把$10^6$当成10W了……RE了N发 这题还是很水的 当然逆序也能做……不过还是整个反过来比较顺手 反转后的a[0]=反转前的a[n],以此类推直 ...

  5. SpringMVC:com.mysql.jdbc.exceptions.MySQLSyntaxErrorException: You have an error in your SQL syntax;

    今天用SpringMVC做修改添加操作,之前的操作都实现了添加修改,但始终报com.mysql.jdbc.exceptions.MySQLSyntaxErrorException: You have ...

  6. Leetcode#129 Sum Root to Leaf Numbers

    原题地址 二叉树的遍历 代码: vector<int> path; int sumNumbers(TreeNode *root) { if (!root) ; ; path.push_ba ...

  7. wifi current SSID

    1. 引入头,#import <SystemConfiguration/CaptiveNetwork.h> 2. 获取SSID info + (id)fetchSSIDInfo { NSA ...

  8. 驱动笔记 - Makefile

    ifneq ($(KERNELRELEASE),) obj-m := hello.ohello-objs := main.o add.o else KDIR := /lib/modules/2.6.1 ...

  9. NumPy的array

    1.numpy包中的array数组,用于弥补列表可以存储任意的数据类型的不足,因为有时候我们需要存储某种类型的数据在数组中,这才是数组的本来内涵.我们通过向numpy.array()函数中传递pyth ...

  10. c#知识库同步的总结

    C#知识库下载地址: http://www.51aspx.com/Code/FileCollector 新版下载地址:http://pan.baidu.com/s/1P3Hk 对于这一款平时用来收集知 ...