React实现半屏滚动：固定区域滚轮可触发滚动区滚动

核心思路是给固定区域绑定鼠标滚轮事件监听，当用户在固定区域滚动时，手动控制滚动区域的滚动位置。具体实现步骤及代码如下：

1. 修改App组件，创建Ref并实现滚动控制逻辑 #

在App组件中创建ref用于获取滚动区域的DOM元素，同时编写处理滚轮事件的函数，将该函数传递给FixedSection：

import React from 'react';
import FixedSection from './FixedSection';
import ScrollingSection from './ScrollingSection';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.scrollingRef = React.createRef();
  }

  handleFixedScroll = (e) => {
    e.preventDefault();
    const scrollingElement = this.scrollingRef.current;
    if (scrollingElement) {
      // 根据滚轮滚动方向调整滚动区域的scrollTop
      scrollingElement.scrollTop += e.deltaY;
    }
  };

  render() {
    return (
      <div className="App">
        <FixedSection onWheel={this.handleFixedScroll} />
        <ScrollingSection ref={this.scrollingRef} />
      </div>
    );
  }
}

export default App;

2. 给FixedSection绑定滚轮事件 #

FixedSection需要接收父组件传递的onWheel函数，并绑定到自身根元素：

import React from 'react';
import './FixedSection.css';

const FixedSection = ({ onWheel }) => {
  return (
    <div 
      className="fixed-section"
      onWheel={onWheel}
    >
      <h2>固定区域</h2>
      <p>在此区域滚动鼠标滚轮，右侧滚动区域会同步滚动</p>
    </div>
  );
};

export default FixedSection;

3. 转发Ref到ScrollingSection的根元素 #

使用React.forwardRef将App组件的ref转发到滚动区域的DOM元素，确保能直接控制其滚动位置：

import React from 'react';
import './ScrollingSection.css';

const ScrollingSection = React.forwardRef((props, ref) => {
  return (
    <div 
      className="scrolling-section"
      ref={ref}
    >
      <h2>滚动区域</h2>
      {/* 生成足够长的内容用于测试滚动 */}
      {Array.from({ length: 50 }).map((_, idx) => (
        <p key={idx}>滚动内容第{idx + 1}行</p>
      ))}
    </div>
  );
});

export default ScrollingSection;

关键说明 #

• e.preventDefault()：阻止页面默认的滚动行为，确保滚轮事件完全由我们的逻辑控制，避免固定区域无滚动内容时页面整体滚动。
• e.deltaY：表示滚轮滚动的距离，向下滚动为正值，向上为负值，直接叠加到scrollTop即可实现同步滚动。
• 保持你原有的CSS样式不变，确保滚动区域的overflow-y: scroll生效，且内容高度超过容器高度。

内容的提问来源于stack exchange，提问作者I Like To Know Stuff