2,287 讀數

在 React 中检测滚动方向：StackOverflow 答案转向 NPM 包

经过 SMAKSS15m2023/12/02

太長; 讀書

TL; `@smakss/react-scroll-direction` 是一个源自 StackOverflow 答案的 npm 包，提供了一种简化的、性能优化的方法来检测 React 应用程序中的滚动方向。它简化了实现，增强了用户界面，并且是为了响应 React 社区的需求而开发的。

featured image - 在 React 中检测滚动方向：StackOverflow 答案转向 NPM 包

介绍

在 Web 开发的动态世界中，React 已成为构建用户界面的流行 JavaScript 库，特别是它在更新和渲染组件方面的效率。 React应用程序中一个常见但稍微复杂的任务是检测网页的滚动方向。无论是为了增强用户体验、触发动画还是实现动态导航栏，了解用户滚动的方向都是现代网页设计的关键方面。

然而，在 React 中准确捕获滚动方向带来了独特的挑战。主要问题在于 React 的事件处理系统和浏览器的本机行为。开发人员经常要解决诸如有效检测滚动事件、管理状态更改以及确保应用程序的性能不受阻碍等问题。

认识到这一挑战，我在 StackOverflow 上发布了一个解决方案，该解决方案深入研究使用 React 的钩子（特别是useState和useEffect ）来检测滚动方向。我的回答引起了广泛关注，引起了许多面临类似问题的开发人员的共鸣。积极的反馈和许多发现它有帮助的开发人员激励我继续下去。

意识到这个解决方案的潜在影响，我决定将此功能封装到一个独立的、可重用的npm 包中。这个包@smakss/react-scroll-direction旨在简化 React 应用程序中滚动方向的检测。它提供了开箱即用的解决方案，减少了样板代码和手动处理滚动事件的复杂性。通过创建这个包，我渴望为 React 社区提供一个解决常见问题并增强整体开发体验的工具。

问题陈述

在 React 中检测滚动方向的挑战

在 React 应用程序中检测滚动方向并不像最初看起来那么简单。这一挑战源于 React 和 Web 浏览器如何处理滚动事件和状态管理的几个核心方面。

事件处理和性能：Web 浏览器在滚动页面时频繁触发滚动事件。在 React 中处理这些事件，尤其是以性能敏感的方式，是至关重要的。处理不当可能会导致用户体验缓慢，因为浏览器很难跟上每个滚动事件可能发生的大量状态更新。这是一个例子：
```
 window.addEventListener('scroll', () => { // This function fires at every scroll event, potentially causing performance issues const direction = window.scrollY > this.lastScroll ? 'down' : 'up'; this.setState({ scrollDirection: direction }); this.lastScroll = window.scrollY; });
```
状态管理和反应性：虽然很强大，但 React 的状态管理系统在跟踪滚动位置时引入了复杂性。由于 React 会在组件状态发生变化时重新渲染组件，因此确保这种重新渲染不会对性能产生负面影响至关重要。一个例子是管理滚动位置状态：
```
 const [scrollPosition, setScrollPosition] = useState(0); useEffect(() => { const handleScroll = () => setScrollPosition(window.scrollY); window.addEventListener('scroll', handleScroll); return () => window.removeEventListener('scroll', handleScroll); }, []);
```
跨浏览器兼容性：不同的浏览器处理滚动事件的方式可能略有不同。确保跨不同平台和浏览器的一致体验是 Web 开发中的一项重要任务。

常见方法及其局限性

React 中通常采用多种方法来检测滚动方向，每种方法都有其自身的局限性：

Naive 事件监听器：最直接的方法是将事件监听器添加到窗口对象并根据滚动位置更新状态。然而，由于滚动事件的高频率，这种方法可能会导致性能问题。它还没有考虑 React 的状态更新和重新渲染行为的细微差别。
节流和去抖：为了缓解性能问题，开发人员经常使用节流或去抖。虽然这些技术减少了事件处理程序调用的数量，但它们可能会导致响应明显滞后，从而使滚动检测感觉响应速度较慢。使用lodash中的throttle创建示例：
```
 const throttledScrollHandler = _.throttle(handleScroll, 100); window.addEventListener('scroll', throttledScrollHandler);
```

复杂的状态管理：高级方法涉及复杂的状态管理，开发人员跟踪先前和当前的滚动位置以确定滚动的方向。这可能会导致代码繁琐，尤其是在具有多个滚动元素的大型应用程序中。

 useEffect(() => { let lastScrollY = window.scrollY; const handleScroll = () => { let direction = lastScrollY < window.scrollY ? 'down' : 'up'; lastScrollY = window.scrollY; setScrollDirection(direction); }; window.addEventListener('scroll', handleScroll); return () => window.removeEventListener('scroll', handleScroll); }, []);

自定义挂钩：一些开发人员创建自定义挂钩来封装滚动检测逻辑。虽然这种方法更加模块化和可重用，但它需要对 React 的 hooks 系统有深入的了解，并且仍然会遇到前面提到的性能问题。
```
 const useScrollDirection = () => { // Implementation of custom hook logic };
```
第三方库：已有用于滚动检测的库和包。然而，它们可能并不总是完全符合项目的特定要求，或者可能会给应用程序增加不必要的膨胀。

虽然 React 中检测滚动方向的方法有多种，但每种方法都需要在性能、响应能力和代码复杂性方面进行权衡。这就需要一种平衡这些方面的解决方案，同时又易于集成到 React 应用程序中。

我的解决方案：StackOverflow 答案

StackOverflow 原始答案摘要

我的 StackOverflow 回答解决了在 React 中检测滚动方向的常见挑战。该解决方案的重点是利用 React 的useState和useEffect挂钩来有效地确定用户是向上还是向下滚动。

使用`useState`和`useEffect` Hooks

滚动位置的useState ：
useState钩子用于维护滚动位置。
```
 const [y, setY] = useState(window.scrollY);
```
这里， y保存当前滚动位置， setY是更新该位置的函数。

useEffect用于事件监听：

useEffect挂钩允许设置和清理滚动事件侦听器。

 useEffect(() => { const handleNavigation = (e) => { // Scroll direction logic }; window.addEventListener("scroll", handleNavigation); return () => window.removeEventListener("scroll", handleNavigation); }, [y]);

该钩子处理滚动事件监听器的注册和注销。

`useEffect`中依赖关系的重要性

添加y作为依赖项useEffect至关重要。当y值发生变化时，它告诉 React 重新运行useEffect回调，确保滚动事件监听器根据最新的滚动位置更新其行为。如果没有这种依赖性，事件侦听器将不会在初始设置后对滚动位置更改做出反应，从而导致方向检测不正确。

初始解决方案及其局限性

最初的解决方案提供了一种检测滚动方向的有效方法，但有一些限制：

性能问题：滚动事件侦听器可能会快速触发多个状态更新，可能会导致性能问题，尤其是在复杂的页面上。
单一用例焦点：该解决方案主要是为检测垂直滚动方向（ y轴）而定制的。将其扩展以处理水平滚动（ x轴）将需要额外的修改。
对window对象的依赖：对全局window对象的直接依赖使得该解决方案不太适应服务器端渲染环境或全局window不易使用的情况。

虽然最初的 StackOverflow 答案提供了使用useState和useEffect检测 React 中滚动方向的基本方法，但很明显，需要进一步优化和增强才能解决性能问题并扩大解决方案的适用性。这导致了@smakss/react-scroll-direction包的开发，该包建立在这个初始概念的基础上，提高了性能和灵活性。

npm 包的开发

从 StackOverflow 到独立 npm 包的答案

从有用的 StackOverflow 答案到开发独立的 npm 包的旅程是出于为 React 开发人员提供更强大、更高效且易于集成的解决方案的愿望。认识到我最初的答案的局限性和特定用例的重点，我看到了扩展其实用性和用户友好性的机会。这导致了@smakss/react-scroll-direction的创建，这是一个将滚动方向检测逻辑封装到可重用且高性能的钩子中的包。

套餐详情

安装说明：

为了使这个包易于访问和使用，我确保它可以通过 npm 或yarn（两种最流行的 JavaScript 包管理器）轻松安装：

使用 npm：

 npm install @smakss/react-scroll-direction

使用纱线：

 yarn add @smakss/react-scroll-direction

基本用法示例：

主要目标是保持使用简单。以下是将钩子集成到 React 项目中的方法：

导入钩子：

 import useDetectScroll from '@smakss/react-scroll-direction';

在组件中使用 Hook：

 const MyComponent = () => { const scrollDirection = useDetectScroll(); // scrollDirection will be either 'up' or 'down' return ( <div> The user is scrolling: {scrollDirection} </div> ); };

这种简单的实现使开发人员能够快速将滚动方向检测集成到他们的项目中，而无需担心底层的复杂性。

强调易于集成

@smakss/react-scroll-direction包的设计重点是简单性和易于集成：

最小化设置：安装过程非常简单。将包添加到项目中只需要一行代码。
易于使用：该钩子可以直接在任何 React 组件中导入和使用，无需额外的设置或配置。
灵活性：该钩子对于大多数用例来说都是开箱即用的，但也足够灵活，可以适应特定的需求。
性能优化：该软件包在构建时充分考虑了性能，确保滚动检测准确高效，最大限度地减少对应用程序响应能力的影响。

@smakss/react-scroll-direction将常用功能转换为方便、易于使用且性能优化的解决方案，简化了 React 应用程序中检测滚动方向的过程。

高级功能和优化

增强套餐

虽然我的 StackOverflow 答案中提供的初始解决方案很有效，但需要进一步改进以优化性能和可用性。在开发@smakss/react-scroll-direction包时，实现了一些高级功能和优化来满足这些需求。

`useCallback`的使用及其好处

关键增强之一是useCallback挂钩的合并。 useCallback对于优化性能很有帮助，特别是在涉及事件侦听器和频繁状态更新的场景中。

useCallback实现示例：

 const handleNavigation = useCallback((e) => { // ...logic to handle navigation... setY(window.scrollY); }, [y]);

好处：
- 记忆化： useCallback记忆该函数，确保它不会在每次渲染时重新创建，除非其依赖项发生变化。当将回调传递给优化的子组件时，这特别有用。
- 稳定引用：它使函数引用在渲染之间保持稳定，这对于其他useEffect挂钩中的依赖项或传递给子组件时至关重要。
- 性能：减少不必要的重新渲染和计算，从而实现更流畅的性能，尤其是在复杂的应用程序中。

最终优化方案

该包的最终版本包括多项优化：

去抖动方法：
- 实现去抖动是为了限制执行滚动方向计算的次数。这种方法确保只有在上次滚动事件经过一定时间后才会触发逻辑，从而减少浏览器的负载。
- 例子：
```
 const debouncedScrollHandler = debounce(handleScroll, 50); window.addEventListener('scroll', debouncedScrollHandler);
```
requestAnimationFrame的使用：
- requestAnimationFrame用于确保滚动方向计算和状态更新在最佳时间发生，与浏览器的重绘周期保持一致。这会带来更流畅的动画和更少的卡顿滚动体验。
- 例子：
```
 const onScroll = () => { window.requestAnimationFrame(updateScrollDir); };
```
高效的事件监听器管理：
- 该包还侧重于事件侦听器的有效管理。这包括在组件安装时设置侦听器并在卸载时清理它们以防止内存泄漏和性能下降。
- 例子：
```
 useEffect(() => { window.addEventListener("scroll", handleNavigation); return () => window.removeEventListener("scroll", handleNavigation); }, [handleNavigation]);
```

通过这些优化， @smakss/react-scroll-direction确保了检测滚动方向的准确性和保持高性能之间的平衡，即使在复杂的 React 应用程序中也是如此。 useCallback的使用以及去抖动、 requestAnimationFrame代表了一种有效且高效地处理滚动事件的综合方法。

演示和实际应用

CodeSandbox 上的交互式演示

为了提供@smakss/react-scroll-direction包的实践体验，我们在 CodeSandbox 上设置了一个交互式演示。该演示允许用户查看正在运行的软件包，实时展示其功能和集成的简易性。

现实场景和应用

@smakss/react-scroll-direction包在各种现实场景中都有其实用性，可满足 Web 开发中常见和独特的用例：

动态导航栏：在现代网页设计中，导航栏经常根据滚动方向改变外观或隐藏/显示。例如，导航栏可能会在向下滚动时缩回以最大化屏幕空间，并在向上滚动时重新出现以方便导航访问。
无限滚动和延迟加载：在实现无限滚动或延迟加载内容的应用程序中，检测滚动方向可以优化数据获取策略，从而改善用户体验和资源管理。
动画触发器：滚动方向检测可以触发动画或过渡，从而创建引人入胜的交互式网络体验。例如，当用户滚动页面的不同部分时，出现视差效果或显示动画。
用户行为分析：了解用户如何与网站交互，包括他们的滚动习惯，对于用户体验研究和设计改进非常有价值。该软件包可以促进此类数据的收集。
辅助功能增强：对于以辅助功能为中心的应用程序，检测滚动方向可以帮助实现使残疾用户更容易访问导航的功能。
基于滚动的功能激活：某些 Web 功能或元素可以根据滚动方向激活或停用，例如弹出元素、返回顶部按钮或动态内容加载。
电子商务和目录：在电子商务网站或在线目录中，滚动方向检测可以增强浏览体验，例如根据用户的滚动行为动态更改产品视图或对选项进行排序。

@smakss/react-scroll-direction包凭借其性能优化和易于集成的特点，非常适合这些场景。它为希望在 React 应用程序中实现基于滚动方向的功能的开发人员提供了一个无缝的解决方案。 CodeSandbox 上的演示是了解其潜力并将其集成到不同项目中的绝佳起点。

来自`@smakss/react-scroll-direction`代码示例

基本用法

@smakss/react-scroll-direction包的基本用法很简单，只涉及几行代码。下面是一个简单的示例，演示了如何在 React 组件中使用该包：

 import useDetectScroll from '@smakss/react-scroll-direction'; const SimpleComponent = () => { const scrollDirection = useDetectScroll(); return ( <div> User is currently scrolling: {scrollDirection} </div> ); }; export default SimpleComponent;

在此示例中， useDetectScroll是从包中导入的，并在功能组件中使用。该钩子返回当前滚动方向（ 'up' 、 'down'或'still' ），然后在组件中呈现。

高级用法

对于更高级的场景，可以使用不同的选项自定义useDetectScroll挂钩。下面的示例演示了如何使用带有自定义阈值和轴的钩子：

 import useDetectScroll from '@smakss/react-scroll-direction'; const AdvancedComponent = () => { const options = { thr: 10, // Set a threshold of 10px for scroll detection axis: 'x', // Detect horizontal scroll scrollUp: 'left', // Custom label for scrolling left scrollDown: 'right', // Custom label for scrolling right }; const scrollDirection = useDetectScroll(options); return ( <div> Horizontal scroll direction: {scrollDirection} </div> ); }; export default AdvancedComponent;

在此高级示例中， useDetectScroll挂钩是使用自定义options对象配置的。 thr属性设置滚动检测的阈值，降低对较小滚动移动的敏感度。 axis属性设置为'x' ，启用水平滚动的检测。提供自定义标签（ 'left'和'right' ）用于沿各自方向滚动。此配置允许针对特定用例或应用程序要求进行更定制的滚动方向检测。

这些示例展示了该包的灵活性和易用性，使其成为希望在 React 应用程序中实现滚动方向检测的开发人员的宝贵工具。无论是基本用例还是高级用例，该软件包都提供了简单而强大的解决方案。

结论

总而言之， @smakss/react-scroll-direction的本质在于其熟练的方法来应对 Web 开发中熟悉但复杂的挑战：检测 React 应用程序中的滚动方向。该软件包将这一概念具体化为一个有形的、易于实施的解决方案，提供了 Web 开发工具中经常寻求但很少实现的简单性和效率的结合。

该包的主要功能围绕其准确且响应迅速地确定滚动方向的能力 - 无论用户是向上、向下、向左还是向右滚动。这是通过智能使用 React 的钩子来实现的，确保滚动方向检测准确且性能优化。该包承担了管理滚动事件、状态更改和重新渲染的繁重工作，这些是实现滚动相关功能时的常见痛点。

使用@smakss/react-scroll-direction最重要的成果之一是它释放了增强用户界面和体验的潜力。它允许开发人员创建对用户滚动做出反应的动态和交互式组件，例如响应式导航栏、滚动动画元素和渐进式内容显示。从本质上讲，它是打造更具吸引力、直观且以用户为中心的 Web 应用程序的关键。

此外，该软件包的性能设计可确保这些增强不会以应用程序速度或响应能力为代价。通过有效处理事件侦听器并结合去抖动和requestAnimationFrame等优化技术， @smakss/react-scroll-direction即使在具有大量滚动交互的复杂应用程序中也能保持流畅的用户体验。

简化滚动方向的检测解决了特定的技术挑战，并使开发人员能够突破创意和交互式网页设计的界限。因此，该软件包不仅是一个工具，而且是创新和增强 React 社区用户参与度的催化剂。

参考

为了提供对本文讨论的主题的全面理解和背景，以下是参考资料和资源：

堆栈溢出答案：
- @smakss/react-scroll-direction该包的最初灵感来自我在 StackOverflow 上提供的解决方案。您可以在此处查看详细答案和社区讨论。
包存储库：
- 要更深入地了解该包，包括其源代码、问题和贡献指南，请访问GitHub 存储库@smakss/react-scroll-direction 。
反应文档：
- 要了解有关 React 及其钩子（ useState 、 useEffect和useCallback ）的更多信息，React 官方文档是非常宝贵的资源。你可以在这里找到它。
性能优化技术：
- 要深入了解 JavaScript 和 React 中的性能优化，特别是有关滚动事件和重新渲染的性能优化，强烈推荐这篇关于滚动事件的 Mozilla 开发者网络 (MDN) 文章和这篇关于优化 JavaScript 执行的文章。
网页设计和用户体验：
- 为了探索滚动方向检测如何增强网页设计和用户体验， A List Apart提供了一系列有关网页设计趋势和最佳实践的文章和资源。