在 JavaScript 中滾動到 Div 的底部
-
在 JavaScript 中使用
scrollTop
和scrollHeight
滾動到 Div 的底部 - 在 JavaScript 中使用 jQuery 滾動到 Div 的底部
-
在 JavaScript 中使用 jQuery
.animate()
滾動到 Div 的底部 -
在 JavaScript 中使用
element.scroll()
滾動到 Div 的底部 -
在 JavaScript 中使用
element.scrollintoview()
滾動到 Div 的底部
本文將教你如何使用以下方法滾動到 div 的底部。
- 使用
scrollTop
和scrollHeight
滾動到底部。 - 使用 jQuery 滾動到底部。
- 使用 jQuery
.animate()
滾動到底部。 - 使用
Element.scroll()
滾動到底部。 - 使用
Element.scrollIntoView()
滾動到底部。
在 JavaScript 中使用 scrollTop
和 scrollHeight
滾動到 Div 的底部
scrollTop
和 scrollHeight
的組合可以導致元素滾動到底部,因為 scrollTop
確定垂直滾動的畫素數。相反,scrollHeight
是元素的高度(可見和不可見部分)。
因此,對於一個元素,當 scrollTop
等於 scrollHeight
時,瀏覽器向上滾動。這允許看到元素的底部。
但是,此方法要求元素應該是可滾動的。當元素具有導致垂直溢位的子元素時,你可以實現此目的。
同時,你可以使用 overflow-y: scroll
控制溢位。這意味著如果沒有 overflow-y: scroll
,此方法將不起作用。
例如,在下一個程式碼塊中,ID 為 scroll-to-bottom
的 HTML 元素的高度為 300 畫素。同時,子元素的高度為 400 畫素。
結果,子元素導致其父元素溢位。但是,我們在 CSS 中使用 overflow-y: scroll
控制了溢位。
<head>
<meta charset="utf-8">
<title>Scroll to bottom - 1 (scrollTop and scrollHeight)</title>
<style type="text/css">
#scroll-to-bottom {
border: 5px solid #1a1a1a;
padding: 2em;
width: 50%;
margin: 0 auto;
height: 300px;
overflow-y: scroll;
}
.content {
height: 400px;
}
p {
font-size: 100px;
}
</style>
</head>
<body>
<div id="scroll-to-bottom">
<div class="content">
<p>This is a dummy text</p>
</div>
</div>
<script>
let scroll_to_bottom = document.getElementById('scroll-to-bottom');
scroll_to_bottom.scrollTop = scroll_to_bottom.scrollHeight;
</script>
</body>
輸出:
在 JavaScript 中使用 jQuery 滾動到 Div 的底部
jQuery 定義了一個名為 scrollTop
的 API,它將獲取或設定滾動條的垂直位置。有問題的滾動條將用於一組匹配的元素。
當與元素的 scrollHeight
一起使用時,你可以滾動到元素的底部。
在接下來的程式碼中,我們使用 jQuery 選擇器選擇了一個元素。同時,我們使用元素 scrollTop
來選擇元素及其 scrollHeight
。
你會從程式碼中注意到我們使用 [0]
來獲取 DOM 元素。因此,當你在 Web 瀏覽器中載入程式碼時,div 將滾動到底部。
此外,在 JavaScript 程式碼中,我們提供了這種方法的變體。但是,我們已將它們作為評論留下。
最後一點,這種方法還要求元素是可滾動的。
<head>
<meta charset="utf-8">
<title>Scroll to bottom - 2 (jQuery)</title>
<style type="text/css">
#scroll-to-bottom {
border: 5px solid #1a1a1a;
padding: 2em;
width: 50%;
margin: 0 auto;
height: 300px;
overflow-y: scroll;
}
.content {
height: 400px;
}
p {
font-size: 100px;
}
</style>
</head>
<body>
<div id="scroll-to-bottom">
<div class="content">
<p>This is a dummy text</p>
</div>
</div>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
>
</script>
<script>
$('#scroll-to-bottom').scrollTop($('#scroll-to-bottom')[0].scrollHeight);
// The following code do the same thing:
// $('#scroll-to-bottom').scrollTop(function() {
// return this.scrollHeight;
// });
// let scroll_to_bottom = $("#scroll-to-bottom");
// scroll_to_bottom.scrollTop(scroll_to_bottom.prop("scrollHeight"));
</script>
</body>
輸出:
在 JavaScript 中使用 jQuery .animate()
滾動到 Div 的底部
jQuery .animate()
API 允許你在 CSS 屬性上執行自定義動畫。因此,你可以建立平滑的滾動效果。
我們所說的平滑
是指滾動到底部效果會吸引使用者。但是,你需要 scrollTop
和 scrollHeight
才能完成此操作。
我們的目標是保持程式碼乾淨,因為我們使用 .animate()
API。因此,我們將把所有程式碼包裝在一個函式中。
函式內部工作如下:
- 使用 jQuery 選擇器獲取元素的 ID。
- 將
.animate()
API 附加到該元素。 - 傳遞一個物件作為
.animate()
API 的第一個引數。在此物件中,執行以下操作:- 建立一個名為
scrollTop
的物件屬性。 - 將
scrollTop
值設定為element.prop("scrollHeight")
。
- 建立一個名為
- 將
.animate()
API 的第二個引數設定為動畫持續時間。
之後,我們在元素的 HTML ID 上呼叫這個函式。同時,該元素應該可以使用 CSS overflow-y: scroll
滾動。
<head>
<meta charset="utf-8">
<title>Scroll to bottom - 3 (jQuery smooth)</title>
<style type="text/css">
#scroll-to-bottom {
border: 5px solid #1a1a1a;
padding: 2em;
width: 50%;
margin: 0 auto;
height: 300px;
overflow-y: scroll;
}
.content {
height: 400px;
}
p {
font-size: 100px;
}
</style>
</head>
<body>
<div id="scroll-to-bottom">
<div class="content">
<p>This is a dummy text</p>
</div>
</div>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
>
</script>
<script>
const smoothScroll = (id) => {
const element = $(`#${id}`);
element.stop().animate({
scrollTop: element.prop("scrollHeight")
}, 500);
}
smoothScroll('scroll-to-bottom');
</script>
</body>
輸出:
在 JavaScript 中使用 element.scroll()
滾動到 Div 的底部
你可以使用 element.scroll()
滾動到元素的底部。element.scroll()
需要的是一組座標。
在這種情況下,我們將座標設定為元素的頂部。此外,如果你願意,可以使其平滑滾動。
要使用 element.scroll()
滾動到底部,請將其第一個引數設定為物件。之後,該物件的第一個屬性應該是 top
屬性。
此屬性的值應為 element.scrollHeight
。此外,將 element.scroll()
的第二個引數設定為 behavior: "smooth"
以獲得平滑滾動。
我們在以下程式碼中的元素上使用了 element.scroll()
。結果,當你在瀏覽器中執行程式碼時,div 將滾動到底部。
此外,該元素應該可以通過 CSS overflow-y: scroll
滾動。
<head>
<meta charset="utf-8">
<title>Scroll to bottom - 4 (Element.scroll())</title>
<style type="text/css">
#scroll-to-bottom {
border: 5px solid #1a1a1a;
padding: 2em;
width: 50%;
margin: 0 auto;
height: 300px;
overflow-y: scroll;
}
.content {
height: 400px;
}
p {
font-size: 100px;
}
</style>
</head>
<body>
<div id="scroll-to-bottom">
<div class="content">
<p>This is a dummy text</p>
</div>
</div>
<script>
let scroll_to_bottom = document.getElementById('scroll-to-bottom');
function scrollBottom(element) {
element.scroll({ top: element.scrollHeight, behavior: "smooth"})
}
scrollBottom(scroll_to_bottom);
</script>
</body>
輸出:
在 JavaScript 中使用 element.scrollintoview()
滾動到 Div 的底部
Element.scrollIntoView()
方法將滾動一個元素以對使用者可見。結果,你會看到隱藏在視線之外的溢位內容。
同時,元素的底部。
與本文前面的示例不同,你需要一個 div 元素。這個 div 元素應該有一些內容。
此外,你不需要為 div 設定高度,因為使用 scrollIntoView
,定義的高度可能會阻止滾動到底部。
在下面的程式碼中,我們在 div 元素上呼叫了 scrollIntoView()
。此外,我們將其引數設定為 false
。
這是將元素滾動到底部所需的內容。
<head>
<meta charset="utf-8">
<title>Scroll to bottom - 5 (scrollIntoView())</title>
<style type="text/css">
body {
padding: 1em;
}
div {
border: 5px solid #1a1a1a;
padding: 2em;
width: 50%;
margin: 0 auto;
}
p {
font-size: 100px;
}
</style>
</head>
<body>
<div id="scroll-to-bottom">
<p>This is a dummy text</p>
</div>
<script type="text/javascript">
let scroll_to_bottom = document.getElementById('scroll-to-bottom');
scroll_to_bottom.scrollIntoView(false);
// scroll_to_bottom.scrollIntoView({ behavior: 'smooth', block: 'end'});
</script>
</body>
輸出:
Habdul Hazeez is a technical writer with amazing research skills. He can connect the dots, and make sense of data that are scattered across different media.
LinkedIn