本教程探讨在ReactJS中如何高效、规范地控制溢出Flexbox容器的滚动条。通过利用useRef Hook获取DOM元素的直接引用，并结合原生DOM的scrollBy方法，我们可以实现在不触发组件不必要重渲染的前提下，通过按钮等交互元素精确控制容器的水平或垂直滚动，从而优化用户体验并保持React的状态管理原则。

挑战：在React中管理DOM滚动

在React开发中，直接操作DOM通常被视为“反模式”，因为React推崇通过状态（State）和属性（Props）来声明式地更新UI。然而，某些场景，如控制一个溢出容器的滚动位置，并不直接涉及组件状态的改变或UI的重新渲染，而是对DOM元素的直接行为操作。在这种情况下，开发者常会面临选择：是使用useEffect、创建自定义Hook，还是直接在事件处理器中修改DOM？

将滚动逻辑放入useEffect可能会导致不必要的依赖管理或渲染循环，因为useEffect主要用于处理组件生命周期中的副作用，且通常在依赖项变化时执行。自定义Hook虽然能封装逻辑，但其内部仍需解决如何获取DOM引用并进行操作的问题。而直接在事件处理器中修改DOM，虽然看似有效，但如果操作不当，可能会与React的虚拟DOM协调机制产生冲突，导致难以预测的行为。正确的做法是，在需要直接与DOM交互而不影响React组件状态的场景下，采用React提供的特定机制。

解决方案：useRef Hook与原生DOM滚动方法

React提供了一个名为useRef的Hook，它允许我们在函数组件中创建一个可变的引用对象，该对象在组件的整个生命周期内保持不变。useRef最常见的用途之一就是直接访问DOM元素。结合原生DOM提供的滚动方法，我们可以优雅地解决上述问题。

1. useRef Hook简介

useRef返回一个可变的ref对象，其.current属性可以被用来保存任何可变的值，包括DOM元素的引用。当我们将ref对象传递给JSX元素的ref属性时，React会在该元素被渲染到DOM后，将其DOM实例赋值给ref.current。这种机制允许我们获取到真实的DOM节点，并对其执行原生DOM操作，而不会触发组件的重新渲染。

import React, { useRef } from 'react';  function MyComponent() {   const myRef = useRef(null); // 初始化为null    // ...    return (     <div ref={myRef}> {/* DOM元素被挂载后，myRef.current将指向这个div元素 */}       {/* 内容 */}     </div>   ); }

2. 原生DOM滚动方法

一旦通过useRef获取到DOM元素的引用，我们就可以使用其原生的滚动API。常用的方法包括：

• element.scrollBy(x, y): 相对于当前滚动位置进行滚动。x和y是水平和垂直方向上的像素偏移量。
• element.scrollTo(x, y): 滚动到指定的绝对位置。
• element.scrollLeft / element.scrollTop: 直接设置或获取元素的水平/垂直滚动位置。

这些方法还可以接受一个选项对象，例如{ behavior: ‘smooth’ }来实现平滑滚动效果，提升用户体验。

Playground

Playground 是一个AI绘画创作和图片编辑平台，每天可以免费创建100张各种类型的艺术图片，还提供背景消除、局部更换等图片编辑工具

175

查看详情

实践案例：控制溢出Flexbox的水平滚动

假设我们有一个水平溢出的Flexbox容器，并希望通过左右按钮来控制其滚动。

CSS样式定义

首先，定义容器的CSS样式，使其能够水平溢出并隐藏垂直滚动条。

.container {   width: 200px; /* 容器固定宽度 */   height: 100px;   overflow: auto; /* 允许内容溢出时出现滚动条 */   overflow-y: hidden; /* 隐藏垂直滚动条 */   white-space: nowrap; /* 确保内容不换行，实现水平滚动 */   display: flex; /* 如果内容是flex项，确保它们在一行 */   align-items: center; /* 垂直居中 */   border: 1px solid #ccc;   box-sizing: border-box; }  .container p {   width: 300px; /* 内容宽度大于容器宽度，导致溢出 */   height: 100px;   background-color: yellow;   margin: 0;   padding: 0 10px;   line-height: 100px; /* 使文本垂直居中 */ }

React组件实现

接下来，在React组件中使用useRef和scrollBy实现滚动控制。

import React, { useRef } from 'react';  const STEP = 40; // 每次滚动的步长  export function Slider() {   // 创建一个ref来引用滚动容器   const scrollable = useRef(null);    // 处理向左滚动的函数   const handleScrollLeft = () => {     // 确保DOM元素已挂载     if (scrollable.current) {       // 使用scrollBy方法向左滚动，负值表示向左       scrollable.current.scrollBy({ left: -STEP, behavior: 'smooth' });     }   };    // 处理向右滚动的函数   const handleScrollRight = () => {     // 确保DOM元素已挂载     if (scrollable.current) {       // 使用scrollBy方法向右滚动，正值表示向右       scrollable.current.scrollBy({ left: STEP, behavior: 'smooth' });     }   };    return (     <>       <div className="container" ref={scrollable}> {/* 将ref绑定到容器元素 */}         <p>Sample Text1, Sample Text2, Sample Text3, Sample Text4, Sample Text5</p>       </div>        {/* 按钮点击事件直接调用处理函数 */}       <button onClick={handleScrollLeft}>Left</button>       <button onClick={handleScrollRight}>Right</button>     </>   ); }

代码解析：

1. const scrollable = useRef(null);: 在组件内部初始化一个ref对象，其.current属性初始值为null。
2. ref={scrollable}: 将这个ref对象绑定到需要滚动的div元素上。当组件挂载后，React会将该div的DOM节点赋值给scrollable.current。
3. handleScrollLeft 和 handleScrollRight 函数：
   • 在函数内部，首先通过if (scrollable.current)进行非空检查，确保DOM元素已经挂载并可访问。
   • scrollable.current.scrollBy({ left: -STEP, behavior: ‘smooth’ }): 调用DOM元素的scrollBy方法。
     • left: -STEP 表示向左滚动STEP个像素。对于垂直滚动，可以使用top属性。
     • behavior: ‘smooth’ 选项提供了平滑的滚动动画，显著提升用户体验。
   • onClick={handleScrollLeft}: 注意，在React中，事件处理器应直接传入函数引用（如handleScrollLeft），而不是字符串形式（如”handleScrollLeft”）。

注意事项与最佳实践

• 避免滥用useRef: 尽管useRef提供了直接DOM访问的能力，但它不应成为修改UI或组件行为的首选。优先通过状态和属性来管理UI。useRef最适合用于非声明式、不影响React渲染流程的DOM操作，如焦点管理、媒体播放控制或本例中的滚动控制。
• 安全性检查: 在访问ref.current之前，务必进行非空检查（if (scrollable.current)），因为在组件首次渲染或DOM元素尚未完全挂载时，ref.current可能为null。
• 平滑滚动: 使用behavior: ‘smooth’选项可以显著改善用户体验，使滚动动画更加自然。
• 可访问性: 对于需要滚动的区域，考虑为键盘用户提供导航方式，例如使用tabIndex和aria-label等属性，确保所有用户都能方便地操作。
• 性能: scrollBy等原生DOM滚动方法通常是高效的，直接操作不会引起React的虚拟DOM比较和重新渲染，因此性能表现良好。

总结

在ReactJS中，当需要对DOM元素进行非声明式、不影响组件状态或渲染的直接操作时，useRef Hook是获取DOM引用并安全执行这些操作的理想选择。结合原生DOM提供的scrollBy、scrollTo等方法，我们可以高效且优雅地实现对溢出容器滚动条的精确控制，例如通过按钮实现左右滚动功能。这种方法既满足了直接DOM操作的需求，又遵循了React的最佳实践，避免了不必要的组件重渲染，从而保持了应用程序的性能和响应性。