diff --git a/app/soapbox/components/scroll-top-button.tsx b/app/soapbox/components/scroll-top-button.tsx index f68a22d3f7..33aadf3282 100644 --- a/app/soapbox/components/scroll-top-button.tsx +++ b/app/soapbox/components/scroll-top-button.tsx @@ -34,14 +34,20 @@ const ScrollTopButton: React.FC = ({ const [scrolled, setScrolled] = useState(false); const autoload = settings.get('autoloadTimelines') === true; - const handleScroll = useCallback(throttle(() => { - const { scrollTop } = (document.scrollingElement || document.documentElement); + const getScrollTop = (): number => { + return (document.scrollingElement || document.documentElement).scrollTop; + }; - if (autoload && scrollTop <= autoloadThreshold) { + const maybeUnload = () => { + if (autoload && getScrollTop() <= autoloadThreshold) { onClick(); } + }; - if (scrollTop > threshold) { + const handleScroll = useCallback(throttle(() => { + maybeUnload(); + + if (getScrollTop() > threshold) { setScrolled(true); } else { setScrolled(false); @@ -65,6 +71,10 @@ const ScrollTopButton: React.FC = ({ }; }, []); + useEffect(() => { + maybeUnload(); + }, [count]); + const visible = count > 0 && scrolled; const classes = classNames('left-1/2 -translate-x-1/2 fixed top-20 z-50', {