在 JavaScript 中滾動到 Div 的底部

  2. 貼士文章
  3. JavaScript 貼士
  4. 在 JavaScript 中滾動到 Div 的底部
Habdul Hazeez 2024年2月15日
JavaScript JavaScript Div JavaScript Scroll
  1. 在 JavaScript 中使用 scrollTop 和 scrollHeight 滾動到 Div 的底部
  2. 在 JavaScript 中使用 jQuery 滾動到 Div 的底部
  3. 在 JavaScript 中使用 jQuery .animate() 滾動到 Div 的底部
  4. 在 JavaScript 中使用 element.scroll() 滾動到 Div 的底部
  5. 在 JavaScript 中使用 element.scrollintoview() 滾動到 Div 的底部
在 JavaScript 中滾動到 Div 的底部

本文將教你如何使用以下方法滾動到 div 的底部。

  1. 使用 scrollTop 和 scrollHeight 滾動到底部。
  2. 使用 jQuery 滾動到底部。
  3. 使用 jQuery .animate() 滾動到底部。
  4. 使用 Element.scroll() 滾動到底部。
  5. 使用 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>

輸出：

使用 scrollTop 和 scrollHeight 滾動到底部

在 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>

輸出：

使用 jQuery 滾動到底部

在 JavaScript 中使用 jQuery .animate() 滾動到 Div 的底部

jQuery .animate() API 允許你在 CSS 屬性上執行自定義動畫。因此，你可以建立平滑的滾動效果。

我們所說的平滑是指滾動到底部效果會吸引使用者。但是，你需要 scrollTop 和 scrollHeight 才能完成此操作。

我們的目標是保持程式碼乾淨，因為我們使用 .animate() API。因此，我們將把所有程式碼包裝在一個函式中。

函式內部工作如下：

  1. 使用 jQuery 選擇器獲取元素的 ID。
  2. 將 .animate() API 附加到該元素。
  3. 傳遞一個物件作為 .animate() API 的第一個引數。在此物件中，執行以下操作：
    1. 建立一個名為 scrollTop 的物件屬性。
    2. 將 scrollTop 值設定為 element.prop("scrollHeight")。
  4. 將 .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>

輸出：

使用 jQuery 平滑動畫滾動到底部

在 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>

輸出：

使用 Element scrollIntoView 滾動到底部

作者： Habdul Hazeez
Habdul Hazeez avatar Habdul Hazeez avatar

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

相關文章 - JavaScript Div

相關文章 - JavaScript Scroll