如何解决Canvas添加横竖滚动条时overflow:scroll失效问题？

你的代码有两个关键问题导致滚动条不显示，以下是修复方案：

1. 修正父容器的overflow属性语法 #

JSX的style对象中，属性值为字符串时必须加引号，原代码中overflow:scroll会被解析为未定义变量，导致overflow设置失效。需要改为：

style={{width:"200px",height:"200px",overflow:"scroll"}}

2. 正确设置Canvas的尺寸属性 #

Canvas有两个尺寸概念：

• 原生width/height属性：决定绘图缓冲区的实际大小（即画布的像素尺寸）
• CSS width/height：控制Canvas在页面中的显示尺寸

你只设置了CSS尺寸，未设置原生属性，会导致Canvas默认以300×150的绘图缓冲区拉伸显示，同时可能影响父容器的滚动判断。需要给Canvas添加原生width和height属性：

<canvas ref={ref_canvas_pic} width="600" height="800"></canvas>

3. 修复useEffect的无限渲染问题 #

原useEffect没有依赖数组，会在组件每次渲染时重新执行，导致图片重复加载。添加空依赖数组，确保只执行一次：

useEffect(() =>{
    // 你的图片加载逻辑
}, [])

完整修复后的代码 #

import { useRef, useEffect } from 'react';

const TestCanvasPage = (props) =>{
    const ref_canvas_pic = useRef();
    useEffect(() =>{
        var chara = new Image();
        var ctx = ref_canvas_pic.current.getContext('2d');
        chara.src = "test600x800pic.png";
        chara.onload = () => { 
            ctx.clearRect(0, 0, ref_canvas_pic.current.width, ref_canvas_pic.current.height);
            ctx.drawImage(chara, 0, 0,
                ref_canvas_pic.current.width,
                ref_canvas_pic.current.height);  
        }
    }, []); // 添加空依赖数组
    return (
        <div>
            <div style={{width:"200px",height:"200px",overflow:"scroll"}}>
                {/* 设置Canvas原生width/height属性 */}
                <canvas ref={ref_canvas_pic} width="600" height="800"></canvas>
            </div>
        </div>
    );    
}

export default TestCanvasPage;

原理说明 #

• 父容器的overflow:"scroll"会在子元素尺寸超过自身时显示滚动条，修正语法后这个属性才能正常生效。
• 设置Canvas的原生width/height属性，确保它的实际布局尺寸为600×800，超过父容器的200×200，触发滚动条显示。
• 空依赖数组让useEffect只在组件挂载时执行一次，避免不必要的资源重复加载。

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