实现拖动Allotment分割条上移时首个面板自动滚动

我用Allotment实现了垂直可拖拽分割面板，拖动分割条上移时，第一个面板不会自动滚动，希望实现拖动分割条上移时该面板自动滚动。

原代码（存在方法名绑定错误） #

import React from "react";
import { Allotment } from "allotment";
import "allotment/dist/style.css";

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      toExpand: true
    };
    this.myRef = React.createRef();
  }

  handleChange = (sizes) => {
    if (sizes.length > 1) {
      if (sizes[1] < 31) {
        this.setState({ toExpand: true });
      } else {
        this.setState({ toExpand: false });
      }
    }
  };

  render() {
    return (
      <div
        style={{
          minWidth: 200,
          height: "100vh",
          overflowX: "auto",
          width: "auto",
          margin: "0px 0px 0px 0px"
        }}
      >
        {/* 此处方法名绑定错误：handleChangeAllotment 应改为 handleChange */}
        <Allotment
          vertical
          onChange={this.handleChangeAllotment}
          ref={this.myRef}
        >
          <Allotment.Pane>
            long <br /> long <br /> long <br />
            long <br /> long <br /> long <br />
            long <br /> long <br /> long <br />
            long <br /> long <br /> long <br />
          </Allotment.Pane>
          <Allotment.Pane preferredSize="0%" minSize={20}>
            short <br /> short <br />
            short <br /> short <br />
            short <br /> short <br />
            short <br /> short <br />
            short <br /> short <br />
            short <br /> short <br />
          </Allotment.Pane>
        </Allotment>
      </div>
    );
  }
}

解决方案 #

通过监听面板尺寸变化，定位滚动容器并触发滚动操作，实现拖拽时的自动滚动效果：

import React from "react";
import { Allotment } from "allotment";
import "allotment/dist/style.css";

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      toExpand: true
    };
    this.myRef = React.createRef();
    this.firstPaneRef = React.createRef(); // 新增第一个面板的DOM引用
  }

  handleChange = (sizes) => {
    if (sizes.length > 1) {
      if (sizes[1] < 31) {
        this.setState({ toExpand: true });
      } else {
        this.setState({ toExpand: false });
      }

      // 触发第一个面板的自动滚动
      if (this.firstPaneRef.current) {
        // 获取Allotment内置的滚动容器（默认类名为allotment__content）
        const scrollContainer = this.firstPaneRef.current.querySelector('.allotment__content');
        if (scrollContainer) {
          // 滚动到顶部，若需滚动到底部可改为scrollTo({ top: scrollContainer.scrollHeight })
          scrollContainer.scrollTo({ top: 0, behavior: 'smooth' });
        }
      }
    }
  };

  render() {
    return (
      <div
        style={{
          minWidth: 200,
          height: "100vh",
          overflowX: "auto",
          width: "auto",
          margin: "0px 0px 0px 0px"
        }}
      >
        <Allotment
          vertical
          onChange={this.handleChange} // 修正方法名绑定错误
          ref={this.myRef}
        >
          {/* 给第一个面板添加ref */}
          <Allotment.Pane ref={this.firstPaneRef}>
            long <br /> long <br /> long <br />
            long <br /> long <br /> long <br />
            long <br /> long <br /> long <br />
            long <br /> long <br /> long <br />
          </Allotment.Pane>
          <Allotment.Pane preferredSize="0%" minSize={20}>
            short <br /> short <br />
            short <br /> short <br />
            short <br /> short <br />
            short <br /> short <br />
            short <br /> short <br />
            short <br /> short <br />
          </Allotment.Pane>
        </Allotment>
      </div>
    );
  }
}

关键说明 #

• 绑定面板Ref：通过firstPaneRef获取第一个面板的DOM节点，进而定位到内部负责滚动的容器。
• 监听尺寸变化：利用Allotment的onChange回调，在分割条拖动导致面板尺寸改变时触发滚动逻辑。
• 滚动自定义：通过scrollTo方法控制滚动位置，behavior: 'smooth'实现平滑滚动，可根据需求修改top值实现滚动到底部或指定位置。
• 修正原代码错误：原代码中onChange绑定的方法名错误，需改为handleChange才能正常触发回调。

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