On my current project, I’m using Excalidraw, and I’m drawing a top layer of <div>
s on top of the <canvas>
. It all works fine, but, when it comes to scrolling through the infinite canvas, if the mouse is on top of one of the <div>
s, scroll events won’t pass through to the canvas below, so these <div>
s are making the UX quite clunky.
Is there a way of having these <div>
s not react to scroll events? I’ve tried something like pointer-events: none
in CSS, and it works, but then the <div>
s won’t react to anything at all.
Here’s a CodeSandbox with an example, which could be summarized by this code block:
"use client";
import { useMemo } from "react";
import dynamic from "next/dynamic";
const Excalidraw = dynamic(
async () => {
const mod = await import("@excalidraw/excalidraw");
return mod.Excalidraw;
},
{ ssr: false },
)
export default function Home() {
const Excal = useMemo(() => <Excalidraw gridModeEnabled />, [])
return (
<main className="absolute w-screen h-screen">
<div
style={{
position: "fixed",
zIndex: 100,
top: "100px",
left: "100px",
backgroundColor: "yellow",
cursor: "pointer",
}}
>
<p>here</p>
</div>
{Excal}
</main>
)
}