8.5w+
社区成员
- 全部
- 问答
怎么获得当前DOCUMENT（比较长，出现滚动条）的从页头到页尾的高度？
我找了MSDN，看到
document.body这个object有3个高度属性：
clientHeight,这个好像只是当前IE窗口的显示高度。
offsetHeight，这个类似，好像是当前IE窗口的显示高度减去了状态栏啊什么的高度。
scrollHeight，这个是从页头到当前窗体滚动到的高度。
问题是：
我想知道文档从页头到页尾的整个高度啊，应该怎么取得呢？
document.body这个object有3个高度属性：
clientHeight,这个好像只是当前IE窗口的显示高度。
offsetHeight，这个类似，好像是当前IE窗口的显示高度减去了状态栏啊什么的高度。
scrollHeight，这个是从页头到当前窗体滚动到的高度。
问题是：
我想知道文档从页头到页尾的整个高度啊，应该怎么取得呢？
...全文
当前发帖距今超过3年，不再开放新的回复
发表回复
cooler 2006-06-21
感谢指教。结贴了。谢谢啊。看来还是我测试的代码有误。
seeu1688 2006-05-30
scrollHeight
注意文档类型声明<!DOCTYPE ...>
IE6加入了Strict模式后，将IE窗口模型的部分body属性重新定义为document.documentElemnt(html)属性。
可加入如下代码判别，已兼容Transitional/Strict模式
<SCRIPT LANGUAGE="JavaScript">
window.onload = function(){
window["viewport"] = (document.documentElement && document.documentElement.clientHeight)?document.documentElement:document.body;
alert(viewport.scrollHeight)
}
</SCRIPT>
IE/FF对于viewport对象解析略有不同，scrollHeight数值上有所差异
注意文档类型声明<!DOCTYPE ...>
IE6加入了Strict模式后，将IE窗口模型的部分body属性重新定义为document.documentElemnt(html)属性。
可加入如下代码判别，已兼容Transitional/Strict模式
<SCRIPT LANGUAGE="JavaScript">
window.onload = function(){
window["viewport"] = (document.documentElement && document.documentElement.clientHeight)?document.documentElement:document.body;
alert(viewport.scrollHeight)
}
</SCRIPT>
IE/FF对于viewport对象解析略有不同，scrollHeight数值上有所差异
sanshisong 2006-05-28
MARK
hbhbhbhbhb1021 2006-05-28
楼主试的是什么？scrollHeight和滚动条滚动到哪没有关系。
测试可以用下面的程序。
楼主试的应该是scrollTop属性。
<script language=javascript>
function hehe()
{
alert(document.body.scrollHeight)
}
</script>
<input name=button1 type=button value="按" onclick="hehe()"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<input name=button1 type=button value="按" onclick="hehe()"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<input name=button1 type=button value="按" onclick="hehe()"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<input name=button1 type=button value="按" onclick="hehe()"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<input name=button1 type=button value="按" onclick="hehe()"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<input name=button1 type=button value="按" onclick="hehe()"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<input name=button1 type=button value="按" onclick="hehe()"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<input name=button1 type=button value="按" onclick="hehe()"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<input name=button1 type=button value="按" onclick="hehe()"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
测试可以用下面的程序。
楼主试的应该是scrollTop属性。
<script language=javascript>
function hehe()
{
alert(document.body.scrollHeight)
}
</script>
<input name=button1 type=button value="按" onclick="hehe()"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<input name=button1 type=button value="按" onclick="hehe()"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<input name=button1 type=button value="按" onclick="hehe()"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<input name=button1 type=button value="按" onclick="hehe()"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<input name=button1 type=button value="按" onclick="hehe()"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<input name=button1 type=button value="按" onclick="hehe()"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<input name=button1 type=button value="按" onclick="hehe()"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<input name=button1 type=button value="按" onclick="hehe()"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<input name=button1 type=button value="按" onclick="hehe()"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
cooler 2006-05-28
我试过了，SCROLLHEIGHT不是，只是当前滚屏到的高度。如果还没有滚动到底，那么就不是最后的高度。
cpio 2006-05-28
整个页面高度：document.body.scrollHeight
显示区域高度：document.body.clientHeight
cooler 2006-05-28
感谢大家支持，看看还有没有什么完美一点的解决阿方案
cooler 2006-05-28
1、滚动的解决方案：
可是如果我滚动到底，用户界面效果会很不好啊。
用户肯定会奇怪为什么网页会自己往下滚啊。
2、作标记：
在页头和页尾做2个标记，取二者的绝对位置然后相减
问题是如何取得二者的绝对位置呢？
可是如果我滚动到底，用户界面效果会很不好啊。
用户肯定会奇怪为什么网页会自己往下滚啊。
2、作标记：
在页头和页尾做2个标记，取二者的绝对位置然后相减
问题是如何取得二者的绝对位置呢？
是是非非 2006-05-28
scrollTo 99999
是是非非 2006-05-28
滚动到底部再计算 clientHeight+scrollHeight
DeluxWorld 2006-05-28
比较笨的方法
在页头和页尾做2个标记，取二者的绝对位置然后相减
在页头和页尾做2个标记，取二者的绝对位置然后相减
cooler 2006-05-28
请指教啊。谢谢了。
cooler 2006-05-28
你现在看到我的帖子的时候，这个文档就是很长的，出现了滚动条的窗体。我想知道的就是这个文档从页头到页尾的高度。
内容页无限长写法html,10行代码实现页面无限滚动 背景：由于网页的执行都是单线程的，在JS执行的过程中，页面会呈现阻塞状态。因此，如果JS处理的数据量过大，过程复杂，可能...原理：实现无限分页的过程大致如下：1 视窗滚动到底部；2 触发加载，添加到现有内容的...
Selenium+ java 之 Webdriver滚动条常见拖动操作 Selenium+ java 之 Webdriver滚动条常见拖动操作 //将页面滚动条拖到底部 ((JavascriptExecutor)driver).executeScript("window.scrollTo(0,document.body.scrollHeight)"); //移动到元素element...
页面的宽高，判断是否滚动到底部 网页可见区域宽： document.body.clientWidth; 网页可见区域高： document.body.clientHeight; 网页可见区域宽： document.body.offsetWidth (包括边线的宽); 网页可见区域高： document.body.offsetHeight ...
判断滚动条是否到达页面的尾部？ 取窗口滚动条高度 function getScrollTop() { var scrollTop=0; if(document.documentElement&&document.documentElement.scrollTop) { scrollTop=document.do...
JS获取页面高度方法小结 //获取到滚动条距可视页面顶部的位置 function getScrollTop(){ var scrollTop = 0; //经测试，在chrome和ff下，document.documentElement.scrollTop并没有什么卵用，都是一直返回0。但在IE下是好使的，可怜的IE。...
Jquery鼠标滚动到页面底部自动加载更多内容,使用分页 滚屏加载--无刷新动态加载数据技术的... #container{margin:10px auto;width: 660px; border: 1px solid #999;} .single_item{padding: 20px; border-bottom: 1px dotted #d3d3d3;} .author{position: absolute; lef
Javascript判断滚动条是否到达页面的尾部 /******************** * 取窗口滚动条高度 ******************/ function getScrollTop() { var scrollTop=0; if(document.documentElement&&document.documentElement.scrollTop) {
JQuery Datatables 控件的搜索框/显示分页的样式,有滚动条保持固定 使用了JQuery datatables的表格控件,但发现表格的列名太多了,会有滚动条,导致搜索框和显示的分页都随着滚动条一起右移了,这样不太人性化,所以需要重新设置这些插件的样式,参考如下内容: $(document).ready...
判断滚动条是否到达页面的尾部 //取窗口滚动条高度 function getScrollTop() { var scrollTop=0; if(document.documentElement&&document.documentElement.scrollTop) { scrollTop=document.documentElemen...
javascript将页尾悬置在页面底部 需求描述： 网站的页尾常常需要被放置在底部。但是普通文档流布局的话，这个底部会随着文档流移动，在不同高度的显示器上的表现效果就不同了。...这里使用的是document.body.offsetHeight这个属性可以获取你整
html5添加锚点锭接,为页面添加锚点链接 为页面添加锚点链接开哈础是发通待质击文以为近哈知按分过续的战发中会遇到为页面中添加锚点链接的需求，即在页面中点击某处，可以跳转到与之有联系的地方。添加锚点的方法比较多，在这儿，把常用的方法大享上。是发...
iScroll框架解析——Android 设备页面内 div（容器，非页面）overflow:scroll; 失效解决（转）... 客户要求在弹出层容器内显示内容，但内容条数过多，容器显示滚动条。按说是So easy，容器设死宽、高，CSS加属性 overflow:scroll; -webkit-overflow-scrolling:touch; 完事！可拿设备去测的时候有趣了，Pc all...
手机端到底部实现分页请求加载(demo代码如下) 手机端到底部实现分页请求加载(小demo代码如下) <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> #scrollBox{ position: fixed; top: 206px...
selenium下拉框拉到最底部的判断 每次下拉浏览器界面的document.body.scrollHeight参数都会发生变化，selenium拉到最底部时该参数将不会改变，以此来判断是否到了最底部，方法如下： def pulldown(): t = True i = 1 while t: check_height = ...
用JS有效解决移动web浏览器中HTML元素的overflow:scroll滚动属性失效问题 如果条数过多，容器显示滚动条。这鸟需求按说是So easy，容器设死宽、高，CSS加属性overflow:scroll;完事！可拿设备去测的时候有趣了，Pc all browser正常，ios正常 ，android失效。泥马在android下效果与 ...
转载一篇比较详细的讲解html,css的一篇文章，很长 转载自这里，转载请注明出处。 DIV+CSS系统学习笔记回顾 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位： web前端开发工程师 web网站架构师 自己创业 ...随着互联网的...
页面刷新如果控制不回到顶端？（除了AJAX）
点击之前记录滚动条位置，点之后让滚动条的位置等于记录下来的位置
说明：
图中红色框线与圈线，以及A区、B区、C区、D区字样非打印要求，是作具体说明所用，曾经用过Delphi开发工具，有一个三方控件...
phpcms美化你的内容页--让侧边列表根据内容长度显示器 有的时候因为内容太长,当拉到后面的时候,左侧(或右侧)的列表标题太少了,空出一小块. 又或是内容太短了,列表标题就过长,后面空出一大块... 是不是还在为这事头痛.不知道应该在 左侧(或右侧) 放多长才合适呢? 让...
phpcms头部代码详细分析 -- 首先说明一下网站模板主要放在根目录\phpcms\templates\default下，各文件夹按功能放置相应模板，content文件夹下主要放置全站的页头、页尾等模板 --> <!-- 另一个要说明一下的就是标...
浅谈WEB页面提速（前端向） 记得面试现在这份工作的时候，一位领导语重心长地谈道——当今的世界是互联网的世界，IT企业之间的竞争是很激烈的，如果一个网页的加载和显示速度，相比别人的站点页面有那么0.1秒的提升，那也是很大的一个成就。...
0.1秒的价值！浅谈Web前端页面提速问题 记得面试现在这份工作的时候，一位领导语重心长地谈道——当今的世界是互联网的世界，IT企业之间的竞争是很激烈的，如果一个网页的加载和显示速度，相比别人的站点页面有那么0.1秒的提升，那也是很大的一个成就。...
前端小白也能快速学会的博客园博客美化全攻略[附源码] 前端小白也能快速学会的博客园博客美化全攻略 文章目录前端小白也能快速学会的博客园博客美化全攻略美化方法论简介准备工作js权限申请如何模仿一个博客园的自定义风格(样式css+动态效果js)?markdown样式自定义在...
CSS这些书写规范你知道吗？ 前言对于项目，那就是我们的亲儿子啊，作为一个前端菜鸟，面向用户就是将自己的儿子介绍给别人认识，肯定要让他白白净净，漂漂亮亮的啦，给别人一眼就喜欢上的感觉咯，哈哈哈~常在河边走，哪有不湿鞋...
java web 页面提速 记得面试现在这份工作的时候，一位领导语重心长地谈道——当今的世界是互联网的世界，IT企业之间的竞争是很激烈的，如果一个网页的加载和显示速度，相比别人的站点页面有那么0.1秒的提升，那也是很大的一个成就。...
