如何使用react-konva实现Canvas滚动至指定位置？

核心原因 #

你外层div滚动无效，是因为真正的滚动容器是react-konva自动生成的.konvajs-content元素，外层div仅作为包裹容器，没有承载滚动逻辑。

具体实现步骤 #

1. 获取滚动容器的可靠引用
   给Stage组件添加ref，通过Konva Stage实例的container()方法直接拿到对应的.konvajs-content DOM元素，比类选择器更稳定。

2. 计算中间滚动位置
   中间位置的计算公式为：(容器总高度 - 容器可视高度) / 2，也就是把滚动条定位到总内容高度与当前可视区域高度差值的一半位置。

3. 触发滚动操作
   使用DOM原生的scrollTo方法实现滚动，想要平滑滚动效果可以添加behavior: 'smooth'参数。

完整代码示例 #

import { useState, useRef } from 'react';
import { Stage, Layer, Image } from 'react-konva';
import useImage from 'use-image';

export default function LongImageViewer() {
  const stageRef = useRef(null);
  const [image] = useImage('你的长图地址');

  const scrollToMiddle = () => {
    // 获取滚动容器
    const container = stageRef.current?.container();
    if (!container) return;

    // 计算中间位置
    const middlePosition = (container.scrollHeight - container.clientHeight) / 2;

    // 执行滚动，smooth实现平滑效果
    container.scrollTo({
      top: middlePosition,
      behavior: 'smooth'
    });
  };

  return (
    <div>
      <button onClick={scrollToMiddle}>滚动到中间</button>
      <Stage 
        ref={stageRef} 
        width={window.innerWidth} 
        height={window.innerHeight}
        style={{ overflow: 'auto' }} // 确保容器允许滚动
      >
        <Layer listening={false}>
          {image && <Image image={image} width={image.width} height={image.height} />}
        </Layer>
      </Stage>
    </div>
  );
}

注意点 #

• 给Stage显式设置style={{ overflow: 'auto' }}，确保.konvajs-content容器会出现滚动条（react-konva默认会给该容器加overflow属性，但显式设置更保险）。
• 使用use-image钩子加载图片是react-konva推荐的方式，能避免图片未加载完成时高度计算出错的问题。

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