js监听页面滚动

2023-04-17  本文已影响0人  LemonTree7
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";
});
上一篇 下一篇

猜你喜欢

热点阅读