目录
示例图说明
如上图所示,假设橙色表示滚动条,蓝色框表示 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>