Element.scrollIntoView()的使用
前言
最近研究聊天室的实现内容的时候，每当用户发消息的使用，我们需要把刚收到或者发送的信息展示在盒子的底部进行展示，但如何保证发的信息会一直在底部实现，查阅资料使用了原生的是事件：scrollIntoView()
介绍
MDN是这样介绍的：Element 接口的 scrollIntoView() 方法会滚动元素的父容器，使被调用 scrollIntoView() 的元素对用户可见。简单的来说就是调用这个方法的元素会出现在可视区域，也就是我们应该看到的区域。
语法介绍
element.scrollIntoView(); // 等同于 element.scrollIntoView(true)
element.scrollIntoView(alignToTop); // Boolean 型参数
element.scrollIntoView(scrollIntoViewOptions); // Object 型参数
我们如果不传值的话，括号的内容默认是true，也就是会使element元素的顶部与可见区域对其，如果是false的话就是底部与可视区域对其，这个就是聊天的时候的效果，如果说我们需要加一点缓和的过度效果的话，可以改为传入一个对象作为参数，参数如下：
参数
alignToTop可选
一个Boolean值：
- 如果为
true，元素的顶端将和其所在滚动区的可视区域的顶端对齐。相应的scrollIntoViewOptions: {block: "start", inline: "nearest"}。这是这个参数的默认值。 - 如果为
false，元素的底端将和其所在滚动区的可视区域的底端对齐。相应的scrollIntoViewOptions: {block: "end", inline: "nearest"}。
scrollIntoViewOptions 可选
一个包含下列属性的对象：
behavior可选定义动画过渡效果，
"auto"或"smooth"之一。默认为"auto"。block可选定义垂直方向的对齐，
"start","center","end", 或"nearest"之一。默认为"start"。inline可选定义水平方向的对齐，
"start","center","end", 或"nearest"之一。默认为"nearest"。
只能传递一个参数，如果传递了第二个参数的话，第二个参数将失效。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
html {
scroll-behavior: smooth;
}
.box1 {
background-color: gray;
width: 400px;
height: 400px;
margin: 50px auto;
padding: 20px;
overflow: auto;
}
.box2 {
width: 100px;
height: 200px;
background-color: red;
}
.btn {
width: 50px;
height: 50px;
}
.box3 {
background-color: blue;
width: 100px;
height: 800px;
position: relative;
}
.bottom {
position: absolute;
bottom: 0;
}
</style>
</head>
<body>
<button class="btn" id="btn1">true</button>
<button class="btn" id="btn2">false</button>
<div class="box1">
<div class="box2">
<p>这是别人的信息</p>
</div>
<div class="box3">
<p>这是你的信息</p>
<p class="bottom">这是蓝色盒子底部</p>
</div>
</div>
<script>
let btn1 = document.querySelector('#btn1')
let btn2 = document.querySelector('#btn2')
console.log(btn1)
btn1.onclick = function () {
document
.querySelector('.box3')
.scrollIntoView(true)
// 加上缓和动画
// document
// .querySelector('.box3')
// .scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' })
}
btn2.onclick = function () {
document
.querySelector('.box3')
.scrollIntoView(false)
// 加上缓和动画
// document
// .querySelector('.box3')
// .scrollIntoView({ behavior: 'smooth', block: 'end', inline: 'nearest' })
}
</script>
</body>
</html>
后续疑问查证可以了解MDN的介绍：https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoView
