在 JavaScript 中滾動到 Div 的底部

Habdul Hazeez 2023年1月30日 2022年5月10日
  1. 在 JavaScript 中使用 scrollTopscrollHeight 滾動到 Div 的底部
  2. 在 JavaScript 中使用 jQuery 滾動到 Div 的底部
  3. 在 JavaScript 中使用 jQuery .animate() 滾動到 Div 的底部
  4. 在 JavaScript 中使用 element.scroll() 滾動到 Div 的底部
  5. 在 JavaScript 中使用 element.scrollintoview() 滾動到 Div 的底部
在 JavaScript 中滾動到 Div 的底部

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

  1. 使用 scrollTopscrollHeight 滾動到底部。
  2. 使用 jQuery 滾動到底部。
  3. 使用 jQuery .animate() 滾動到底部。
  4. 使用 Element.scroll() 滾動到底部。
  5. 使用 Element.scrollIntoView() 滾動到底部。

在 JavaScript 中使用 scrollTopscrollHeight 滾動到 Div 的底部

scrollTopscrollHeight 的組合可以導致元素滾動到底部,因為 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 屬性上執行自定義動畫。因此,你可以建立平滑的滾動效果。

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

我們的目標是保持程式碼乾淨,因為我們使用 .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 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