Scrollable container

Use the editor inside a page that scrolls, and see how focus decides who gets the wheel events.

import { Tldraw } from 'tldraw'
import 'tldraw/tldraw.css'

export default function ScrollExample() {
	return (
		<div
			style={{
				width: '150vw',
				height: '150vh',
				display: 'flex',
				justifyContent: 'center',
				alignItems: 'center',
				backgroundColor: '#fff',
			}}
		>
			<div style={{ width: '60vw', height: '80vh' }}>
				<Tldraw persistenceKey="scroll-example" autoFocus={true} />
			</div>
		</div>
	)
}

/*
While the editor is focused it consumes wheel events to pan and zoom, so the page won't
scroll when the pointer is over the canvas. Try turning off `autoFocus` to see the
difference.
*/

The Tldraw component works inside a scrollable page. The one thing to be aware of is the mouse wheel: while the editor is focused it consumes wheel events to pan and zoom the canvas, and the page doesn't scroll. When it's blurred, wheel events pass through and the page scrolls as normal.

Here the editor is centered in a container larger than the viewport, with autoFocus on. Try scrolling with the pointer over the canvas, then set autoFocus={false} and try again.

Is this page helpful?
Prev
Inset canvas
Next
Multiple editors