在 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