当前位置: 首页 > news >正文

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 - 高质量源码分享平台-免费下载各类网站源码与模板及前沿动态资讯

http://www.dtcms.com/a/273168.html

相关文章:

  • Java+Vue开发的资产设备全周期管理系统,移动端+后台管理,涵盖采购至报废全程,实现高效管理、成本可控与资源优化
  • Shell脚本一键部署KubeSphere前置环境
  • 04-ES6
  • 多线程 JAVA
  • Java :Optional容器类
  • python的保险业务管理与数据分析系统
  • AI 智能体:从辅助工具到自主决策者
  • 【YOLO脚本】对模型yaml文件测试
  • ZYNQ MPSOC PL端DDR4读写--仿真(3)
  • JDK的Closure闭包详解
  • 发现和发明浅谈
  • 2025年最新Dubbo-admin 部署
  • HTML初学者第四天
  • Android 应用常见安全问题
  • JavaScript基础(三)
  • 一文讲清楚React Hooks
  • 解决问题的“测地线”:关于第一性原理与其他系统思考框架
  • RocksDB 与 ZenFS:原理、特性及在科研与工程中的应用初步探索
  • 使用Arthas监听Spring代理对象
  • 从UI设计到数字孪生实战部署:构建智慧教育的在线学习分析平台
  • Java观察者模式实现方式与测试方法
  • Constants
  • SSM 框架整合教程:从环境搭建到 CRUD 实现
  • html页面,一个控件,可以粘贴图片和样式,一直按enter键会将下面内容推下去
  • OrCAD 24.1补丁005中文界面切换指南
  • QT Android 如何打包大文件到目录下?
  • 【Pandas】pandas DataFrame from_records
  • Android开发中几种scope的对比
  • ClickHouse JSON 解析
  • Kubernetes Dashboard UI 部署安装