如何在Component B中展示Component A的水平滚动条？求useRef实现方案

核心思路 #

1. 隐藏ComponentA自身的原生水平滚动条
2. 通过useRef获取ComponentA内部的滚动容器DOM元素，暴露滚动控制方法给父组件
3. 在ComponentB内创建自定义滚动条，同步它与ComponentA的滚动位置

具体代码实现 #

1. 改造ComponentA（隐藏滚动条+暴露滚动能力） #

import { forwardRef, useImperativeHandle, useRef } from 'react';

const ComponentA = forwardRef((props, ref) => {
  const scrollContainerRef = useRef(null);

  // 向父组件暴露滚动相关操作方法
  useImperativeHandle(ref, () => ({
    getScrollElement: () => scrollContainerRef.current,
    getScrollLeft: () => scrollContainerRef.current?.scrollLeft,
    setScrollLeft: (value) => {
      scrollContainerRef.current && (scrollContainerRef.current.scrollLeft = value);
    },
    getMaxScroll: () => {
      const el = scrollContainerRef.current;
      return el ? el.scrollWidth - el.clientWidth : 0;
    }
  }));

  return (
    <div 
      ref={scrollContainerRef}
      style={{
        width: '100%',
        overflowX: 'scroll',
        // 隐藏原生滚动条的跨浏览器适配
        scrollbarWidth: 'none', // Firefox
        msOverflowStyle: 'none' // IE/Edge
      }}
      onScroll={(e) => {
        // 滚动时通知父组件更新滚动条位置
        props.onScroll?.(e.target.scrollLeft);
      }}
    >
      {/* 示例宽内容，实际替换为你的业务内容 */}
      <div style={{ width: '2000px', padding: '1rem' }}>
        some content over here which is wide enough to get horizontal scroll
      </div>
    </div>
  );
});

ComponentA.displayName = 'ComponentA';

// 补充Chrome/Safari的滚动条隐藏样式（可放在全局CSS或组件内style标签）
/*
.scroll-container::-webkit-scrollbar {
  display: none;
}
*/

2. 父组件关联两个组件，实现滚动同步 #

import { useRef, useState } from 'react';
import ComponentA from './ComponentA';

// 定义ComponentB
const ComponentB = ({ children }) => {
  return (
    <div style={{ border: '1px solid #eee', padding: '1rem', marginTop: '1rem' }}>
      {children}
    </div>
  );
};

// 父组件
const Parent = () => {
  const componentARef = useRef(null);
  const [scrollLeft, setScrollLeft] = useState(0);

  // 同步ComponentA的滚动到ComponentB的滚动条
  const handleComponentAScroll = (left) => {
    setScrollLeft(left);
  };

  // 拖动ComponentB内的滚动条时，同步ComponentA的滚动位置
  const handleScrollBarChange = (e) => {
    const maxScroll = componentARef.current?.getMaxScroll();
    if (!maxScroll) return;
    const scrollRatio = e.target.value / 100;
    componentARef.current.setScrollLeft(maxScroll * scrollRatio);
  };

  // 计算滚动条的位置比例
  const getScrollRatio = () => {
    const maxScroll = componentARef.current?.getMaxScroll();
    return maxScroll === 0 ? 0 : (scrollLeft / maxScroll) * 100;
  };

  return (
    <div style={{ maxWidth: '800px', margin: '0 auto' }}>
      <ComponentA ref={componentARef} onScroll={handleComponentAScroll} />
      <ComponentB>
        <div>some content</div>
        
        {/* 自定义水平滚动条（可替换为更美观的样式） */}
        <div style={{ 
          width: '100%', 
          height: '8px', 
          backgroundColor: '#f0f0f0', 
          borderRadius: '4px',
          margin: '1.5rem 0',
          position: 'relative'
        }}>
          <div 
            style={{
              position: 'absolute',
              left: `${getScrollRatio()}%`,
              transform: 'translateX(-50%)',
              width: '40px',
              height: '100%',
              backgroundColor: '#2563eb',
              borderRadius: '4px',
              cursor: 'grab'
            }}
            draggable
            onDrag={(e) => {
              const containerRect = e.target.parentElement.getBoundingClientRect();
              const x = e.clientX - containerRect.left;
              const ratio = x / containerRect.width;
              const maxScroll = componentARef.current?.getMaxScroll();
              maxScroll && componentARef.current.setScrollLeft(maxScroll * ratio);
            }}
            onDragStart={(e) => e.target.style.cursor = 'grabbing'}
            onDragEnd={(e) => e.target.style.cursor = 'grab'}
          />
        </div>

        {/* 或者用input range快速实现滚动条（更简洁） */}
        <input
          type="range"
          min="0"
          max="100"
          value={getScrollRatio()}
          onChange={handleScrollBarChange}
          style={{ width: '100%', marginBottom: '1rem' }}
        />

        <div>more content</div>
      </ComponentB>
    </div>
  );
};

export default Parent;

关键细节说明 #

• 滚动条隐藏：通过CSS属性实现跨浏览器的原生滚动条隐藏，确保ComponentA仅保留滚动功能但不显示滚动条
• Ref的作用：forwardRef让父组件能访问ComponentA内部的滚动容器，useImperativeHandle封装了滚动控制方法，避免直接操作DOM的耦合问题
• 双向同步：ComponentA滚动时触发回调更新滚动条位置；拖动ComponentB内的滚动条时，通过计算滚动比例同步ComponentA的滚动位置

内容的提问来源于stack exchange，提问作者Muhammad Bilal