示例图说明

如上图所示，假设橙色表示滚动条，蓝色框表示 div 区域，黑色区域表示看不到的文档部分，高度说明如下：

B：表示 div 元素高度，div 的高度不会随着内容的编号而编号，与有没有出现滚动条无关，只与自己的 height 属性有关

A：表示 div 内文档高度，当没有出现滚动条时，A文档高度等于 div 高度（A = B）；随着内容的增加出现滚动条时，A 的值会增加

C：滚动条相对 div 元素顶部（top）边缘的距离，与上面隐藏的文档无关。

A >= B + C；// 图1 中 C = 0; 图2 中 A > B + C ；图3 中 A = B + C;

div 文档总高度（A）获取方式如下：

var scrollHeight = document.getElementById("#div1").scrollHeight; //scrollHeight 必须 DOM 操作,JQuery 没有对应方法

var scrollHeight = $("#div1")[0].scrollHeight //可以使用 JQuery 先选择元素，然后 [0] 转为 DOM 对象

div 元素高度（B）获取方式如下：

var height=$("#dvi1").height() // JQuery 操作方式

div 滚动条相对 div 元素顶部（top）边缘的高度：

var scrollTop = $("#div1").scrollTop(); // JQuery 获取方式

var scrollTop = document.getElementById("div1").scrollTop; // DOM 方式

编码示例

回到顶/底部

实现代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"><title>Div 距离汇总</title><style type="text/css">.test {width: 500px;height: 300px;background-color: #444444;overflow: auto;color: white;}h1 {margin-top: 80px;}</style><!-- JQuery CDN--><script src="http://code.jquery.com/jquery-2.1.1.min.js"></script><script type="text/javascript">$(function () {/*** 回到顶部*/$("#top").click(function () {$(".test").scrollTop(0);/*** scrollTop：div 滚动条距离 div 上边缘的距离* scrollHeight：div 内文档总高度（包括被隐藏的），当没有出现滚动条时，scrollHeight = height* height：div 元素的高度，只与自己 height 属性有关，与滚动条无关*/let scrollTop = $("#inner").scrollTop();let scrollHeight = $("#inner")[0].scrollHeight;let height = $("#inner").height();console.log("height=" + height, "scrollTop=" + scrollTop, "scrollHeight=" + scrollHeight);});/*** 调到底部*/$("#bottom").click(function () {let scrollHeight = document.getElementById("inner").scrollHeight;$(".test").scrollTop(scrollHeight);let scrollTop = document.getElementById("inner").scrollTop;let height = $("#inner").height();scrollHeight = document.getElementById("inner").scrollHeight;console.log("height=" + height, "scrollTop=" + scrollTop, "scrollHeight=" + scrollHeight);});/*** 运动到中间*/$("#center").click(function () {let scrollHeight = document.getElementById("inner").scrollHeight;let middle = scrollHeight / 2;$(".test").scrollTop(middle);let scrollTop = $("#inner").scrollTop();let height = $("#inner").height();scrollHeight = document.getElementById("inner").scrollHeight;console.log("height=" + height, "scrollTop=" + scrollTop, "scrollHeight=" + scrollHeight, "middle=" + middle);});});</script>
</head>
<body>
<div class="test" id="inner"><h1>China 1</h1><h1>USA 1</h1><h1>UK 1</h1><h1>China 2</h1><h1>USA 2</h1><h1>UK 2</h1><h1>China 3</h1><h1>USA 3</h1><h1>UK 3</h1>
</div>
<button id="top">回到顶部</button>
<button id="bottom">跳到底部</button>
<button id="center">运动中间</button>
</body>
</html>

消息区自动滚动到底部

实现代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"><title>Div 距离汇总</title><style type="text/css">.test {width: 300px;height: 100px;background-color: #444444;overflow: auto;color: white;}h1 {margin-top: 80px;}</style><!-- JQuery CDN--><script src="http://code.jquery.com/jquery-2.1.1.min.js"></script><script type="text/javascript">$(function () {/*** 发送消息时，滚动条自动移动在底部*/$("#send").click(function () {let message = $("textarea").val();$("#inner").append("<span>" + message + "</span><br>");/*** scrollHeight：div 内文档总高度（包括被隐藏的），当没有出现滚动条时，scrollHeight = height* height：div 元素的高度，只与自己 height 属性有关，与滚动条无关*/let scrollHeight = $("#inner")[0].scrollHeight;let height = $("#inner").height();/*** 滚动条距离元素顶部的高度 + div 元素的高度 = 文档的高度* 这样滚动条刚好在底部*/$("#inner").scrollTop(scrollHeight - height);});});</script>
</head>
<body>
<div class="test" id="inner">
</div>
<div class="test"><textarea style="width: 100%;height: 100%;background-color: white"></textarea>
</div><button id="send">发送</button>
</body>
</html>

Div 高度、滚动条距 Div 顶部偏移量、Div 中文档总高度相关推荐

html css div 高度自适应,HTML/CSS中，DIV高度自适应解决办法
获取content高度 *{color:#fff} .header{ height: 40px; width:100%; position: fixed; top:0; left:0; backgro ...
html三个div相同高度,两个DIV高度自适应方法(左右两个DIV高度一样)
html: aaaa aaaa bbb 1.使用display:table; 利用的table本身的自适应特性,兼容性好,容易使用#container{width:500px; display: ta ...
html页面如何变成百分之百,css height 100% CSS成功设置DIV高度百分之百
css height 100% ,使用CSS成功设置DIV高度百分之百,CSS height百分之百高度让html中第一个div(最外层div)高度100%(height:100%)实现. 一.di ...
CSS设置div高度自适应
通过CSS实现Div高度自适应: 问: 在一个DIV中有多个未知高度的子元素DIV,怎样通过CSS实现子元素div同高或怎样实现同行div按照内容最多的那个设置高度. 如图: 实现1:添加表格特性 ...
js获取滚动条距离浏览器顶部,底部的高度
做web开发经常会碰到需要获取浏览器的滚动条与顶部和底部的距离,然后做相应的处理动作.下面作者就如何通过js来获取浏览器滚动条距离浏览器顶部和底部的高度做一下分享,这个是同时兼容ie和firefox的 ...
Jquery页面滚动条向下拉到div的位置时，此div就固定在顶部，向上拉时返回原位置
Div在网页打开时固定在某个位置(不一定是网页的最顶端),当滚动条向下滚动时,页面的顶部到达此div位置后,此div就固定在网页的最顶部跟随移动,当滚动条向上滚动时,页面顶部高过此div原来的固定位置 ...
内容滚动条和子div高度自适应
内容滚动条和子div高度自适应写在前面:老套路有图有真相,这才叫做分享.本文内容是:一个div里面,两个子div高度自适应(平分父div的高度)和元素内容过多的时候,根据需求出现高度滚动条或者宽度滚 ...
如何div高度占满全屏无滚动条
如何div高度占满全屏无滚动条 <!DOCTYPE html> <html><head><meta charset="UTF-8"> ...
html 设置距离左边,js怎样设置div层左边距及与顶部边距
实现原理: 首先,我们将弹出框中的内容放置在一个特殊的DIV层中,然后默认隐藏它(即初始不可见,使用CSS即可实现).当用户执行某个动作时--比如点击某个链接或者将鼠标光标移动到某个链接上--我们将 ...
div 超出高度滚动条，超出宽度点点点
超出高度滚动条 style="width:230px; height: 180px; overflow: auto;" 超出宽度点点点 style="width: 220 ...

Div 高度、滚动条距 Div 顶部偏移量、Div 中文档总高度

示例图说明

编码示例

回到顶/底部

消息区自动滚动到底部

Div 高度、滚动条距 Div 顶部偏移量、Div 中文档总高度相关推荐

最新文章

热门文章