Div 高度、滾動條距 Div 頂部偏移量、Div 中文件總高度
阿新 • • 發佈：2018-11-30
示例圖說明
如上圖所示，假設橙色表示滾動條，藍色框表示 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>