如何在nextjs应用程序中检测页面滚动到底部

ar5n3qh5 于 2023-04-20 发布在其他

关注(0)|答案(1)|浏览(204)

我只需要有一个窗口滚动位置检测器，我已经尝试了代码从多篇文章中，我已经找到，他们似乎都没有工作.大多数时候，console.logs只会出现当我刷新页面，但从来没有得到更新时，用户实际上是滚动.
我需要它来为市场增加无限的负载，我不打算使用任何复杂的第三方库或其他东西来做一些微不足道的事情。
下面是我正在使用的代码，尽管它根本不起作用（注意，我已经尝试了这个代码的多个不同的迭代，从所有跨网络和没有工作）

const handleScroll = () => {
  console.log("scroll")
};

useEffect(() => {
  window.addEventListener("scroll", handleScroll);
  return () => window.removeEventListener("scroll", handleScroll);
});

next.js

来源：https://stackoverflow.com/questions/75988409/how-to-detect-page-scroll-to-bottom-in-a-nextjs-application

1条答案

按热度按时间

ui7jx7zq1#

这只是使用了react state，你可以在任何组件中使用它作为钩子。你所要做的就是设置一个useEffect，每当它发生变化时触发，每当它达到你设置的阈值时就会触发。
这里是钩子

import { useEffect, useState } from "react";

function useScrollPosition() {
  const [scrollPosition, setScrollPosition] = useState(0);

  function handleScroll() {
    const height =
      document.documentElement.scrollHeight -
      document.documentElement.clientHeight;

    const windowScroll = document.documentElement.scrollTop;

    const scrolled = (windowScroll / height) * 100;

    setScrollPosition(scrolled);
  }

  useEffect(() => {
    window.addEventListener("scroll", handleScroll, { passive: true });
    return () => {
      window.removeEventListener("scroll", handleScroll);
    };
  });

  return scrollPosition;
}

以及如何在组件中使用它

function Component() {
  const scrollPosition = useScrollPosition();

  useEffect(() => {
    if (scrollPosition > 80) {
      // something happens after it reaches 80% of the screen
    }
    }, [scrollPosition]);

  return (
    <div>{scrollPosition}</div>
}

赞(0）回复(0）举报 2023-04-20

我来回答

如何在nextjs应用程序中检测页面滚动到底部

1条答案

相关问题

热门标签

最新问答