在 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