如何在React中像高手一样处理滚动条位置

滚动有时会被人们忽略，直到它不再按预期工作。你是否曾经发现自己在每次路由更改后都会自动滚回顶部，或者在刷新后找不到之前的位置了？

确实如此，滚动条位置比你所想的更重要！今天这篇文章会看看如何在 React 中处理滚动条位置，以确保用户不会找不到他们之前的位置。

准备好零食，因为接下来会很精彩！

为什么滚动位置很重要呢？就像书里的书签一样；它让用户能够找到你提供的数据？

考虑读一本每次你合上书后都会从头开始的小说。这不是很让人厌烦吗？同样的情况也适用于网页应用。

无论是保存页面刷新后的滚动位置，还是在单页面应用内移动时保持滚动条位置不变，管理滚动位置都可能显著提高用户体验。

现实生活中我们会遇到一些情况：

• 页面刷新后，用户不会丢失他们之前的滚动位置。
• 在单页面应用中导航时，确保在切换视图时滚动到正确的位置。
• 在动态加载内容时，保持滚动位置不变。

所以，你的浏览器默认情况下是如何处理滚动的？很简单，它并不关心。没有特别的方式，滚动位置会自动重置。

幸好，JavaScript 提供了一些必要的 DOM 操作来解决这种情况，例如 window.scrollTo、window.scroll 和 window.scrollBy。

它们确实有效，但要说它们能让你在聚会上大放异彩，那还是有点夸张。

    // 滚动到顶部  
    window.scrollTo(0, 0);  

    // 滚动特定距离  
    window.scrollBy(0, 100); // 滚动100像素向下

这些都是基本的组件，但在React的世界里，我们还需要一些更进一步的改进。

欢迎来到 React Refs，这里可以让你一探 DOM。Refs 让你直接操作 DOM 组件，当你需要定义滚动位置时，这会非常有用。

这里有一个简单的Refs使用指南。

1. 创建一个 ref 对象 使用 React.createRef() 或者如果你使用函数组件，使用 useRef()。
2. 将其 ref 附加 到可滚动组件上。
3. 使用 DOM 方法来操作 ref 的当前组件的滚动。

垂直滚动条控制示例。

    import React, { useRef } from 'react';  

    const ScrollComponent = () => {  
      // 创建一个引用给可滚动的 div  
      const scrollRef = useRef(null);  

      // 滚动到顶部的函数  
      const scrollToTop = () => {  
        // 如果 scrollRef 已定义，就滚动到顶部  
        if (scrollRef.current) {  
          scrollRef.current.scrollTop = 0;  
        }  
      };  

      return (  
        <div>  
          {/* 带有引用的可滚动区域 */}  
          <div ref={scrollRef} style={{ overflowY: 'scroll', height: '200px', border: '1px solid #ddd' }}>  
            {/* 滚动区域内的内容 */}  
            <div style={{ height: '1000px', padding: '10px' }}>  
              向下滚动，然后点击按钮回到顶部！  
            </div>  
          </div>  
          {/* 滚动到顶部的按钮 */}  
          <button onClick={scrollToTop} style={{ marginTop: '10px', padding: '5px 10px', cursor: 'pointer' }}>  
            滚动到顶部  
          </button>  
        </div>  
      );  
    };  

    export default ScrollComponent;

React的useState和useEffect钩子在处理滚动位置时就像蝙蝠侠和罗宾一样，一个观测变化，一个做出响应。

滚动条位置可以保存到状态中，并在组件挂载时自动恢复。

    import React, { useState, useEffect } from 'react';  

    const ScrollSaver = () => {  
      // 用来存储当前滚动位置的状态  
      const [scrollPos, setScrollPos] = useState(0);  

      // 用于当用户滚动时更新滚动位置的状态  
      useEffect(() => {  
        const handleScroll = () => setScrollPos(window.scrollY);  

        // 添加滚动事件的监听器  
        window.addEventListener('scroll', handleScroll);  

        // 用于移除事件监听器的清理函数  
        return () => window.removeEventListener('scroll', handleScroll);  
      }, []);  

      // 用于在组件挂载时恢复滚动位置的效用  
      useEffect(() => {  
        // 滚动到已保存的位置  
        window.scrollTo(0, scrollPos);  
      }, [scrollPos]);  

      return (  
        <div style={{ height: '1500px', padding: '20px' }}>  
          <h1>滚动并刷新</h1>  
          <p>向下滚动，刷新页面，看看神奇效果吧！</p>  
        </div>  
      );  
    };  

    export default ScrollSaver;

这种方法能帮你像专家一样保持完美的滚动位置。设定并记住你的目标，就像在健身房锻炼时一样。

在 React 中导航路由可能会感觉像是滚动重置的噩梦。React Router 默认不会处理滚动位置，但你可以通过一些 JavaScript 技巧来解决这种情况。

在路由更改时重置滚动。

    // 从 React 和 React Router 导入所需的钩子  
    import { useEffect } from 'react';  
    import { useLocation } from 'react-router-dom';  

    // 定义一个名为 ScrollToTop 的功能组件  
    const ScrollToTop = () => {  
      // 从 location 对象中获取当前的 pathname  
      const { pathname } = useLocation();  

      // 使用 useEffect 钩子来执行副作用  
      useEffect(() => {  
        // 每当 pathname 发生变化时，将窗口滚动到顶部  
        window.scrollTo(0, 0);  
      }, [pathname]); // 当 'pathname' 发生变化时重新执行效果  

      // 这个组件不渲染任何可视的 UI，所以返回 null  
      return null;  
    };  

    // 将 ScrollToTop 组件作为默认导出  
    export default ScrollToTop;

向您的 App 添加这个组件，就像有一个熟练的传菜员一样。他每次都能搞定。

为什么要止步于基本的滚动控制，当你可以创建可复用的自定义钩子呢？让我们来创建一个 useScrollPosition（滚动位置钩子）钩子吧。

    import { useEffect, useState } from 'react';  

    // 一个自定义钩子，用来追踪窗口的滚动位置  
    const useScrollPosition = () => {  
      // 一个状态变量，用于存储当前滚动位置  
      const [scrollPosition, setScrollPosition] = useState(0);  

      useEffect(() => {  
        // 一个函数，用于更新滚动位置  
        const updatePosition = () => setScrollPosition(window.scrollY);  

        // 添加一个事件监听器，监听滚动事件  
        window.addEventListener('scroll', updatePosition);  

        // 一个清理函数，用于在组件卸载时移除事件监听器  
        return () => window.removeEventListener('scroll', updatePosition);  
      }, []); // 空依赖数组确保此效果仅在组件挂载时运行一次  

      // 返回当前的滚动位置  
      return scrollPosition;  
    };  

    export default useScrollPosition;

这个自定义钩子不仅让你的代码更整洁，还增加了滚动跟踪功能，让你的组件更棒。

处理复杂布局的滚动位置管理

嵌套滚动区域？不用担心！适度使用CSS特性，如overflow属性，并使用refs来单独管理各个滚动位置。

    // 在使用 React 的复杂布局中添加滚动管理
    import React, { useRef } from 'react';

    const ComplexLayout = () => {
      // 定义一个 ref 变量来引用可滚动的容器
      const containerRef = useRef(null);

      // 滚动到容器底部的函数
      const scrollToBottom = () => {
        // 通过设置 scrollTop 为容器的 scrollHeight 来滚动到容器底部
        containerRef.current.scrollTop = containerRef.current.scrollHeight;
      };

      return (
        <div
          ref={containerRef} // 将 ref 绑定到容器 div
          style={{
            overflowY: 'scroll', // 启用垂直滚动
            height: '300px', // 为滚动区域设置固定高度
            border: '1px solid #ccc', // 可选：添加边框以提高可见性
            padding: '10px' // 可选：添加一些内边距
          }}
        >
          {/* 这里的内容高度应该超过容器以启用滚动 */}
          <div style={{ height: '600px' }}>在此处添加内容</div>

          {/* 按钮以触发滚动到底部 */}
          <button onClick={scrollToBottom} style={{ marginTop: '10px' }}>
            滚到底
          </button>
        </div>
      );
    };

    export default ComplexLayout;

在 React 中处理滚动不仅仅依靠 window.scrollTo。无论是通过简单的 DOM 操作、React Refs，或者是自定义钩子，甚至使用第三方框架，都能找到合适的解决方案。

关键要点：

• 在选择解决方案之前，先了解您的滚动需求。
• React 的钩子和 Refs 提供更精准的控制。
• 不要忽视性能或无障碍性。
• 尝试不同的滚动位置，找到最适合您的。

所以，下次当你发现自己不停地刷屏时，，记得这不一定是这样的。如果你喜欢这篇帖子的话，请点个赞并关注我吧，获取更多小贴士！

感谢您的阅读！如果您觉得这里有所得，请点个赞，关注以获取更多资讯。