关于获取各种浏览器滚动条的高度

最新推荐文章于 2024-03-31 02:04:56 发布
最新推荐文章于 2024-03-31 02:04:56 发布
阅读量718 收藏
点赞数
分类专栏： javascript JavaWeb
下面是代码:
程序代码
<script>
function getInfo(){
         var s = "";
         s += "网页可见区域宽："+ document.body.clientWidth;
         s += "网页可见区域高："+ document.body.clientHeight;
         s += "网页可见区域宽："+ document.body.offsetWidth + " (包括边线和滚动条的宽)";
         s += "网页可见区域高："+ document.body.offsetHeight + " (包括边线的宽)";
         s += "网页正文全文宽："+ document.body.scrollWidth;
         s += "网页正文全文高："+ document.body.scrollHeight;
         s += "网页被卷去的高："+ document.body.scrollTop;
         s += "网页被卷去的左："+ document.body.scrollLeft;
         s += "网页正文部分上："+ window.screenTop;
         s += "网页正文部分左："+ window.screenLeft;
         s += "屏幕分辨率的高："+ window.screen.height;
         s += "屏幕分辨率的宽："+ window.screen.width;
         s += "屏幕可用工作区高度："+ window.screen.availHeight;
         s += "屏幕可用工作区宽度："+ window.screen.availWidth;
         s += "你的屏幕设置是 "+ window.screen.colorDepth +" 位彩色";
         s += "你的屏幕设置 "+ window.screen.deviceXDPI +" 像素/英寸";
}
</script>

在我本地测试当中：
在IE、FireFox、Opera下都可以使用

程序代码
document.body.clientWidth
document.body.clientHeight

即可获得，很简单，很方便。而在公司项目当中：
Opera仍然使用

程序代码
document.body.clientWidth
document.body.clientHeight

可是IE和FireFox则使用

程序代码
document.documentElement.clientWidth
document.documentElement.clientHeight

原来是W3C的标准在作怪啊
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
如果在页面中添加这行标记的话
在IE中：

程序代码[www.greencss.com]
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度在FireFox中：
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度

在Opera中：

程序代码
document.body.clientWidth ==> 可见区域宽度
document.body.clientHeight ==> 可见区域高度
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）
document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）

而如果没有定义W3C的标准，则
IE为：

程序代码document.documentElement.clientWidth ==> 0
document.documentElement.clientHeight ==> 0FireFox为：
document.documentElement.clientWidth ==&gt; 页面对象宽度（即BODY对象宽度加上Margin宽）document.documentElement.clientHeight ==&gt; 页面对象高度（即BODY对象高度加上Margin高）Opera为：
document.documentElement.clientWidth ==&gt; 页面对象宽度（即BODY对象宽度加上Margin宽）document.documentElement.clientHeight ==&gt; 页面对象高度（即BODY对象高度加上Margin高）

关于获取各种浏览器滚动条的高度
在这里提供一个函数，作为参考
程序代码
var w3c=(document.getElementById)? true: false;
var agt=navigator.userAgent.toLowerCase();
var ie = ((agt.indexOf("msie") != -1) && (agt.indexOf("opera") == -1) && (agt.indexOf("omniweb") == -1));
function IeTrueBody(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body;
}
function GetScrollTop(){
return ie ? IeTrueBody().scrollTop : window.pageYOffset;
}
春馨梦
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
实时获取浏览器滚动条高度（兼容写法）
猿小白的博客
08-27 1688
目录 一、js版本写法 二、jquery版本写法 一、js版本写法 <script type="text/javascript"> window.onscroll = function() { //获取滚动条到顶部的垂直高度 var scrollHigh = document.documentElement.scrollTop || document.body.scrollTop; console.log(scrollHigh) } </script>
获取浏览器高度，浏览器没有滚动条
04-24
获取浏览器高度，用于框架页面自试应，且框架有滚动条，浏览器没有滚动条
浏览器滚动条高度的获取
weixin_45727472的博客
06-27 4618
浏览器滚动条高度的获取 开始 最近做业务需求时，需要监听滚动条scoll事件，获取滚动条高度，用的document.body.scrollTop发现得到的值一直是0，后来做了一些查询，挖出不少秘密，做次笔记，以免忘掉 先放结论： 1、对有doctype申明的页面 可以使用document.documentElement.scrollTop 2、没有doctype申明的页面使用：document.body.scrollTop 3、safari:特例独行：使用 window.pageYOffset 所以我们可以
获取浏览器滚动条高度
weixin_42150028的博客
08-28 2220
&amp;amp;lt;!doctype html&amp;amp;gt; &amp;amp;lt;html&amp;amp;gt; &amp;amp;lt;head&amp;amp;gt; &amp;amp;lt;meta charset=&amp;quot;utf-8&amp;quot; /&amp;amp;gt; &amp;amp;lt;style type=&amp;quot;text/css&a
【JS实践】JS获取各种高度宽度、浏览器窗口滚动条的位置、元素的几何尺寸【PC&ipad】...
weixin_34248023的博客
12-19 379
为什么80%的码农都做不了架构师？>>> ...
jquery如何获取元素的滚动条高度等实现代码
10-23
本篇文章将详细介绍如何使用jQuery来获取元素的滚动条高度以及其他相关实现代码。 首先，要理解滚动条高度通常是指元素内容超出其可视区域的部分，可以通过`scrollTop()`方法获取。例如，`$(document).scrollTop()`...
js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码
01-19
获取浏览器窗口的可视区域高度和宽度,滚动条高度有需要的朋友可参考一下。IE中，浏览器显示窗口大小只能以下获取： 代码如下复制代码 代码如下:document.body.offsetWidth document.body.offsetHeight在声明了...
JS 获取滚动条高度示例代码
10-26
在JavaScript中，获取...总之，获取JavaScript中的滚动条高度主要是通过`scrollTop`属性或`pageYOffset`属性来实现，同时需要考虑兼容不同浏览器的行为。在实际开发中，根据项目需求和目标浏览器范围选择合适的方法。
原生js仿浏览器滚动条效果
10-20
仿浏览器滚动条 *{margin: 0;padding: 0;} #demo{width: 300px;height: 500px;border: 1px solid red;margin:100px;position:relative;overflow:hidden;} p{padding:5px 20px 5px 5px;font-size:26px;position...
js基础--获取浏览器当前页面的滚动条高度的兼容写法
积少成多
03-28 1796
欢迎访问我的个人博客：http://www.xiaolongwu.cn 前言 在开发中，兼容性问题是最常见的，今天就来介绍一下关于获取滚动条高度的兼容性写法，宽度同理，我在这里就不一一解释了 各浏览器的写法 IE6/7/8 document.documentElement.scrollTop IE9以上 window.pageYOffset或者document.document...
jquery 获取浏览器滚动条宽度数值
06-12
jquery 获取当前浏览器滚动条宽度数值
不同浏览器获取滚动条高度
杨铜锤的专栏
10-24 1033
火狐浏览器获取用：document.documentElement.scrollTop;谷歌浏览器获取用：document.body.scrollTop；为了适应不同浏览器，在页面上可建立一个公共方法 function getScrollTop(){ if(!document.documentElement.scrollTop){ return doc
jquery获取浏览器高度、宽度和滚动条高度
盗墓笔记
07-02 429
jquery获取浏览器高度、宽度和滚动条高度 我们做前端的，经常需要获取浏览器的宽度和高度，还有滚动条的高度，今天整理出来，以后拿来直接用，去他X的手写代码。 Jquery代码： alert($(window).height()); //浏览器时下窗口可视区域高度    alert($(document).height()); //浏览器时下窗口文档的高度    aler
兼容不同浏览器的获取滚动高度的方法
happyqyt的专栏
04-22 3690
[*]几乎所有浏览器都不支持在document.body上监听整个网页的滚动事件，除了QQ浏览器 [*]几乎所有浏览器都支持在window对象上监听整个网页的滚动事件；[*]几乎所有浏览器都支持在document对象上监听整个网页的滚动事件，除了QQ浏览器；[*]几乎所有浏览器都支持用document.documentElement.scrollTop来获取网页的滚动高度，除了Chrome和Sa
兼容各种浏览器常用的原生js工具类：获取浏览器滚动条宽高、事件
最新发布
2401_83621426的博客
03-31 450
基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。
获取浏览器窗口宽高和浏览器滚动条宽高
weixin_41218855的博客
05-10 302
1、浏览器宽高 document.documentElement.clientWidth; document.documentElement.clientHeihgt; 2、获取浏览器滚动条宽度/高度 显示的数值是页面上方滚上去的隐藏的内容的数值 var iScrollTop = document.documentElement.scrollTop...
JS - 获取页面滚动的高度
weixin_30819085的博客
09-03 2729
document.documentElement.scrollTop||document.body.scrollTop 转载于:https://www.cnblogs.com/500m/p/11452519.html
java获取目标窗口的滚动条_获取页面高度，窗口高度，滚动条高度等参数值getPageSize,getPageScroll...
weixin_35586996的博客
02-25 180
functiongetPageScroll(){varyScroll;if(self.pageYOffset){yScroll=self.pageYOffset;}elseif(document.documentElement&&document.documentElement.scrollTop){//Explorer6StrictyScroll...
js 获取浏览器滚动的高度
07-12
可以使用以下代码来获取浏览器滚动的高度： ``` // 获取滚动的高度 var scrollHeight = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; ``` 这个代码片段中，`window....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值