keep alive 的页面滚动条 会自动滚动到顶部

192 阅读1分钟

滚动的时候记住它的滚动位置,在onActivated中设置

const scrollEvent = scrollData => {
  // 计算滚动距离 每滚动超过 自动请求下一页
  // 获取包含容器和滚动条的元素
  const container = document.getElementById('scroll-container') as HTMLElement;
  // 获取滚动条的垂直偏移量
  const scrollTop = container.scrollTop;
  scrollTopVal.value = scrollTop;
  console.log(scrollTopVal.value, '111111111');

  // 获取元素内容的总高度
  const scrollHeight = container.scrollHeight;
  // 获取容器的高度
  const clientHeight = container.clientHeight;
  // 计算滚动条与容器底部的距离
  const distanceToBottom = scrollHeight - scrollTop - clientHeight;
  if (distanceToBottom <= 800) {
    // 判断当前数据量是否以达到最大值;
    // 如果已经达到最大值不再调用防抖节流函数去请求数据
    if (searchParams.value.total > list.value.length) {
      debounce(pageChangeEvent, 200)();
    } else {
      console.log(`数据量已达最大值,不再加载数据了`);
    }
  }
};
onActivated(() => {
  const container = document.getElementById('scroll-container') as HTMLElement;
  container.scrollTop = scrollTopVal.value;
});