当前位置: 首页 > 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.lryc.cn/news/584604.html

相关文章:

  • FFmpeg滤镜相关的重要结构体
  • FFmpeg Windows安装
  • JavaScript基础(三)
  • C++中的list的学习
  • 解析几何几百年重大错误:将无穷多各异圆盘(球)误为同一点集
  • kotlin中withContext,async,launch几种异步的区别
  • 目标检测中的评价指标计算
  • Spring Boot项目中大文件上传的高级实践与性能优化
  • 三维旋转沿轴分解
  • Java设计模式之行为型模式(观察者模式)介绍与说明
  • 约束-1-约束
  • selenium中xpath的用法大全
  • Web学习笔记2
  • [架构之美]虚拟机Ubuntu密码重置
  • nmap扫描指定网段中指定开放端口的主机(IP,mac地址)
  • Kafka的无消息丢失配置怎么实现
  • 删除k8s安装残留
  • 「Java案例」求PI的值
  • 告别卡顿与慢响应!现代 Web 应用性能优化:从前端渲染到后端算法的全面提速指南
  • 快速搭建服务器,fetch请求从服务器获取数据
  • 搭建自动化工作流:探寻解放双手的有效方案(1)
  • RK3568项目(八)--linux驱动开发之基础外设(上)
  • Linux驱动开发(platform 设备驱动)
  • ARM单片机滴答定时器理解与应用(二)(详细解析)(完)
  • 多线程交替打印
  • 技术学习_检索增强生成(RAG)
  • 【个人笔记】负载均衡
  • 微服务项目远程调用时的负载均衡是如何实现的?
  • Prompt提示词的主要类型和核心原则
  • 【WEB】Polar靶场 Day8 详细笔记