React 自定义Hook——页面或元素滚动到底部监听 Hook

功能简介

useReachBottom 是一个 React 自定义 Hook，支持监听页面（body）或任意可滚动元素（如 div）是否滚动到底部。它能帮助你在用户滑动到底部时触发加载更多、显示提示等操作，极大提升前端交互体验。

亮点

• 通用性强：支持监听整个页面，也支持监听任意传入的滚动容器。
• 兼容性好：内部对 scrollTop/scrollHeight 取值做了兼容处理，适配主流浏览器。
• 易用性高：API 简单，直接返回是否到底部的布尔值。
• 可自定义偏移：支持 offset 参数，灵活控制触发时机。
• 无第三方依赖：纯 React 实现，体积小巧。

使用场景

• 无限滚动加载：用户滑动到底部时自动加载更多内容。
• 滚动提示：如“已到页面底部”提示条。
• 局部滚动区域监听：如聊天窗口、评论区、弹窗等自定义滚动容器。
• 数据上报：统计用户是否浏览到页面底部。

使用示例

1. 监听页面（body）滚动到底部

import useReachBottom from "../hooks/useReachBottom";function PageScrollDemo() {const isBottom = useReachBottom();return (<div><div>{isBottom ? "已到页面底部" : "未到页面底部"}</div>{/* 内容足够撑开页面高度 */}{Array.from({ length: 20 }).map((_, i) => (<div key={i}>内容 {i + 1}</div>))}</div>);
}

2. 监听指定 div 元素滚动到底部

import { useRef } from "react";
import useReachBottom from "../hooks/useReachBottom";function DivScrollDemo() {const divRef = useRef();const isBottom = useReachBottom(divRef);return (<div><divref={divRef}style={{ height: 200, overflow: "auto", border: "1px solid #ccc" }}>{Array.from({ length: 10 }).map((_, i) => (<div key={i}>行 {i + 1}</div>))}</div><div>{isBottom ? "已到div底部" : "未到div底部"}</div></div>);
}

useReachBottom 源码

import { useEffect, useState } from "react";export default function useReachBottom(targetRef = null, offset = 0) {const [isBottom, setIsBottom] = useState(false);useEffect(() => {const element = targetRef?.current || document.documentElement;function handleScroll() {let scrollTop, scrollHeight, clientHeight;if (targetRef?.current) {scrollTop = element.scrollTop;scrollHeight = element.scrollHeight;clientHeight = element.clientHeight;} else {// 兼容所有主流浏览器scrollTop = Math.max(window.scrollY,document.documentElement.scrollTop,document.body.scrollTop);scrollHeight = Math.max(document.documentElement.scrollHeight,document.body.scrollHeight);clientHeight = window.innerHeight;}if (scrollHeight > clientHeight) {setIsBottom(scrollTop + clientHeight >= scrollHeight - 2 - offset);} else {setIsBottom(false);}}const scrollTarget = targetRef?.current || window;scrollTarget.addEventListener("scroll", handleScroll);handleScroll();return () => {scrollTarget.removeEventListener("scroll", handleScroll);};}, [targetRef, offset]);return isBottom;
}

 React 自定义Hook之页面或元素滚动到底部监听 Hook-useReachBottom - 高质量源码分享平台-免费下载各类网站源码与模板及前沿动态资讯