美文网首页
js监听页面滚动

js监听页面滚动

作者: LemonTree7 | 来源:发表于2023-04-17 18:03 被阅读0次
const isReachBottom = ref(false);
const clientHeight = ref(0);
const scrollTop = ref(0);
const scrollHeight = ref(0);
const handleScroll = (event: Event) => {
  clientHeight.value = document.documentElement.clientHeight;
  scrollHeight.value = document.documentElement.scrollHeight;
  scrollTop.value = document.documentElement.scrollTop;
  if (clientHeight.value + scrollTop.value >= scrollHeight.value) {
//是否到页面底部
    isReachBottom.value = true;
  }
  console.log(clientHeight.value, scrollHeight.value, scrollTop.value);
  if (scrollTop.value >= 700) {
    useConfig().theme.value = "default";
  } else {
    useConfig().theme.value = "dark";
  }
};

onMounted(() => {
  window.addEventListener("scroll", handleScroll);
});

onUnmounted(() => {
  window.removeEventListener("scroll", handleScroll);
  useConfig().theme.value = "default";
});

相关文章

网友评论

      本文标题:js监听页面滚动

      本文链接:https://www.haomeiwen.com/subject/yrccjdtx.html