做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.οnscrοll=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. js获取滚动条距离浏览器顶部,底部的高度

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

  2. 利用js获取滚动条滚动距离，实现图片固定在屏幕的某个位置

    利用js获取滚动条滚动距离,实现图片固定在屏幕的某个位置 思路: 1.获取对象距离顶部和左侧的距离: 2.获取元素对象: 3.当滚动条滚动时获取滚动条滚动的距离: 4.滚动条滚动时执行函数:对象距离顶 ...

  3. 获取滚动条距离底部的高度

    今天写移动端遇到了需求要获取滚动条距离底部的高度 var wHeight = $(document).height();var scrollHeight = wHeight - $(document) ...

  4. vue watch 修改滚动条_Vue.js 中滚动条始终定位在底部的方法

    Vue.js 中滚动条始终定位在底部的方法 发布于 2020-2-23| 复制链接 分享一篇关于vue 中滚动条始终定位在底部的方法,具有很好的参考价值,希望对大家有所帮助.一起跟随小妖过来看看吧 滚 ...

  5. js判断当前设备及获取设备、浏览器的宽度和高度

    在开发的时候,我们常常需要根据用户当前设备进行相应设置和显示,在此展示一个简单的方法判断(这个方法忘了是从哪里看来了的~),希望对你有帮助哦~ /*** 判断当前设备* @returns*/ func ...

  6. java怎么指定父窗口大小_[Java教程]jQuery如何获取div距离窗口顶部或者父元素顶部的距离...

    [Java教程]jQuery如何获取div距离窗口顶部或者父元素顶部的距离 0 2016-01-03 11:00:19 jQuery如何获取div距离窗口顶部或者父元素顶部的距离: 在实际应用或许会需 ...

  7. js获取span到浏览器窗口顶部的距离，包括被lineHeight撑开的部分在内

    getBoundingClientRect getBoundingClientRect().top拿到的是真实dom部分到顶部的距离,不把行高算在内 getBoundingClientRect().h ...

  8. vue滚动条事件（获取滚动条距离底部距离）

    网上大部分vue的滚动条操作是监听dom实现,我是用@scroll实现 首先有滚动条的div一定要设固定高度,然后overflow:auto;出现滚动条 passive是使滚动更加流畅,减少卡顿 &l ...

  9. 如何使用jquery获取 (滚动条)距离(页面底部)的距离

    为什么80%的码农都做不了架构师?>>>    if($(document).height()-$(document).scrollTop()<1200){ //当整个页面do ...

最新文章

  1. centeros7安装docker
  2. COGS 2274. [HEOI 2016] tree
  3. [转]c++ new带括号和不带括号
  4. Python 执行SQL带参数
  5. 03_ClickHouse数据格式，TabSeparated、TSKV、CSV格式、JSON格式、Parquet、ORC、其它数据格式（Native，Pretty，Values，Vertical等）
  6. CentOS7安装EPEL源
  7. RTX5 | 内存池04 - 共享内存用于线程之间的通讯（阻塞方式）- 使用信号量
  8. python解析visio_再见，Visio！
  9. 神舟战神笔记本Z7M-CT7NA开机进入Bios方法
  10. CAD/CASS断面插件合集断面工具箱批量提取断面数据绘制断面图（断面必备）
  11. 程序员英文面试题及回答（带中文翻译）
  12. 列联表分析——独立性检验（卡方检验）
  13. itune音乐排行榜：法国周榜TOP100（2022年7月16日）
  14. 这是我见过最好的唐诗，而且通俗易懂2
  15. Sprite (1)
  16. The Joel Test：Joel 用来评价软件开发团队成熟度的12个问题
  17. 一些文学常识。。。。。。
  18. c语言实现HACK汇编编译器（一）
  19. idea新建springboot项目后始终无法识别org.codehaus.plexus.component.repository.exception.ComponentLookupException
  20. 15个SEO学习的国外SEO博客

热门文章

  1. OpenGL ES SDK for Android - 4
  2. 打造智能家居安防系统 七个选购常识你需懂
  3. 开学很忙，故障很强(1)!!
  4. 最简单的Jdbc连接Oracle代码
  5. 用java编写的一个迪杰斯特拉算法（单源最短路径算法，Dijkstra算法）。
  6. RocketMQ源码解析-事务消息的二阶段提交
  7. python中mat函数_Python中flatten( )函数及函数用法详解
  8. python时间函数详解_Python 日期的转换及计算的具体使用详解
  9. 32岁了学python来的及吗_为什么每个人都应该在2020年学习Python？
  10. build.gradle配置参数详解