vue3关于滚动条的应用

vue3监听滚动条事件

在标签上加上 @scroll=‘执行的回调函数’ 即可

<div class="content" @scroll="listenScollToBottom">
</div>

vue3设置滚动条位置

在标签上加上 ref=“你用ref定义的变量名称”

<div class="content" ref="scrollContainer">
</div>

设置滚动条位置

文档 ：https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollTo

1. 不使用 options 属性

const container = scrollContainer.value;
container.scrollTo(0,container.scrollHeight - container.clientHeight)

2. 使用 options 属性

const container = scrollContainer.value;
 container.scrollTo({
   top: container.scrollHeight - container.clientHeight,
   behavior: "smooth", // 或者 'auto'
});

不是用options 属性默认直接跳转到目标位置

options属性的区别

smooth 属性会产生动画效果，并且滚动条事件也会触发多次
instant 属性不会产生动画效果，直接跳转，滚动条事件只会触发一次
总结：通过监听滚动条来调用后台接口时，选择smooth 最好

实际应用场景

通常滚动条事件用来确定是否快到底部或顶部，然后调用后台接口
我们以一个实例来说
template部分：

<div class="content" ref="scrollContainer" @scroll="listenScollToBottom">
</div>

script部分：

//往上翻是否还有数据
let isHave = ref("false");
let curr_page = 1;
const listenScollToBottom = () => {
  console.log(scrollContainer.value.scrollTop)
  if (scrollContainer.value.scrollTop < 200 && isHave.value === "true") {
    isHave.value = "false"
    curr_page++;
    getContents();
  }
};
const getContents = () => {
  $.ajax({
    url: "https://app5609.acapp.acwing.com.cn/api/chat/get/chat-content/",
    type: "get",
    headers: {
      Authorization: "Bearer " + store.state.user.token,
    },
    data: {
      recordUserId: chooseRecord.value.recordUserId,
      page: curr_page,
    },
    success(resp) {
      if (resp.error_message === "successfully") {
        if (curr_page === 1) {
          messageContent.value.splice(
            0,
            messageContent.value.length,
            ...resp.message.records
          );
          delayScoll();
        } else {
          messageContent.value.unshift(...resp.message.records);
        }
        isHave.value = resp.isHave
      }
    },
    error() {},
  });
};

这个实例告诉我们滚动条快到顶部时调用后台接口

isHave：告诉前端还需不需要请求数据
curr_page：类似分页，当前在第几页，也就是调用了几次
getContents： 获取后台数据的函数

设计滑动到顶部调用接口的时候容易出现的问题：

1. 调用后台接口的逻辑为区间值，不为固定的某一个值

导致的问题：向上滑动的时候会调用很多次后台接口
解决办法：将 isHave 的变量设为false，当接口调用完毕后，dom节点会撑大，滚动条自然会变化，并且isHave也会更新成后台传过来的值