2026西湖龙井茶官网DTC发售：茶农直供，政府溯源防伪到农户家 

无需外部库的 React 滚动效果

滚动是网页上最基本的一种用户交互方式。随着阅读进度填充的进度条、缩小并固定在顶部的页眉、锁定背后页面的模态框、“滚动到指定区域”按钮——这些效果几乎出现在每一个现代网站上。然而，在 React 中正确实现这些效果意味着要同时处理 addEventListener、IntersectionObserver、overflow 样式，以及大量令人意外的边界情况。大多数开发者要么引入一个体积庞大的动画库，要么花费数小时编写脆弱的命令式代码。

本文将采取另一种路径。我们将逐一解决六种常见的滚动场景：每次先从手动实现开始，让你理解其底层机制；然后用来自 ReactUse（@reactuses/core）的一个专用 Hook 来替代它。ReactUse 是一个开源项目，包含 100 多个 React Hook，将常见的浏览器和元素交互封装成简单且可组合的 API。读完本文后，你将拥有一套可组合、支持服务端渲染（SSR）的安全 Hook 工具包，能够处理滚动位置追踪、滚动锁定、平滑滚动、粘性检测、可见性检测和交叉观察——全程无需引入任何外部动画或滚动库。

1. 追踪滚动位置

手动实现方式

追踪用户滚动了多远的距离看似简单，但一旦考虑到节流、滚动方向判断，以及如何检测用户是否已滚动到页面边缘，事情就变得复杂起来。

import { useEffect, useRef, useState } from "react";

function ManualScrollTracker() {
  const containerRef = useRef<HTMLDivElement>(null);
  const [scrollY, setScrollY] = useState(0);
  const [direction, setDirection] = useState<"向上" | "向下">("向下");
  const lastY = useRef(0);

  useEffect(() => {
    const el = containerRef.current
免责声明：本文内容来自互联网，该文观点不代表本站观点。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，请到页面底部单击反馈，一经查实，本站将立刻删除。