Vue - 置顶按钮

前言

在项目中遇到聊天功能，功能涉及置顶和置底知识，由此记录一下实现思路和过程。

1、代码实现

html

<div class="p_b_36" id="idTop"> <div> <div v-for="item in arr" :key="item.id">{{ item.value }} name: 'HelloWorld', props: { msg: String }, data() { return { arr: [], value: '' } }, created() { this.init(); }, methods: { // 发送 async sending() { let arrLen = this.arr.length, value = this.value; await this.arr.push({ id: `id${arrLen + 1}`, value: value }); this.setBottom(); }, // 置底 setBottom() { // // 方式一 vue3无响应 // let scrollTop = document.body.scrollHeight; // document.documentElement.scrollTop = scrollTop; // 方式二 把该元素的最底部内容显示在可视区域的最底部 let idBottom = document.getElementById("idBottom"); idBottom.scrollIntoView({ block: "end" }); }, // 置顶 setTop() { // 方式一 vue3无响应 // document.documentElement.scrollTop = 0; // 方式二 把该元素的最顶部内容显示在可视区域的最顶部 let idTop = document.getElementById("idTop"); idTop.scrollIntoView({ block: "start" }); }, // 初始化 init() { let arr = []; for (let i = 0; i < 86; i++) arr.push({ id: `id${i + 1}`, value: `${i + 1}` }); this.arr = arr; } } } 

style

.pf { position: fixed; } .cp { cursor: pointer; } .right_26 { right: 26px; } .padding_6 { padding: 6px; } .bottom_100 { bottom: 100px; } .bottom_50 { bottom: 50px; } .p_b_36 { padding-bottom: 36px; } .m_l_8 { margin-left: 8px; } .bac_eee { background-color: #eeeeee; } .bor_rad_2 { border-radius: 2px; } 

3、scrollTop实现置顶置底(方式一)

基本介绍

Element.scrollTop属性可以获取或设置一个元素的内容垂直滚动的像素数。 一个元素的scrollTop值是这个元素的内容顶部到它的视口可见内容的距离的度量。当一个元素的内容没有产生垂直方向的滚动条，那么它的scrollTop值为0。 在使用显示比例缩放的系统上，scrollTop可能会提供一个小数值。

设置值规范

如果一个元素不能被滚动，scrollTop将被设置为0。 设置scrollTop的值小于0，scrollTop被设为0。 如果设置了超出这个容器可滚动的值，scrollTop会被设为最大值。

4、scrollIntoView实现置顶置底(方式二)

简单介绍

Element接口的scrollIntoView()方法会滚动元素的父容器，使被调用scrollIntoView()的元素对用户可见。

参数 布尔值

如果为true，元素的顶端将和其所在滚动区的可视区域的顶端对齐，等价于{ block: "start", inline: "nearest" }，这是这个参数的默认值。 如果为false，元素的底端将和其所在滚动区的可视区域的底端对齐，等价于{ block: "end", inline: "nearest" }。

属性对象

behavior定义动画过渡效果，auto或smooth之一，默认为auto。 block定义垂直方向的对齐，start、center、end或nearest之一，默认为start。 inline定义水平方向的对齐，start、center、end或nearest之一，默认为nearest。

注意

此元素可能不会完全滚动到顶端或底端，这取决于其他元素的布局情况。

5、总结

1、方式一在vue3中无响应，不报错，功能也没有实现。 2、方式二可能在某些场景不适用，但兼容性会比方式一好一些。 3、以上两种方式属于原生方法和属性，所以不区分框架与原生情况。 4、置底功能适用于聊天页面，置顶功能适用于有滚动条需要返回顶部的功能。 5、方式一使用设置滚动条的方式实现；方式二使用锚点的方式实现。