Disabling mouse wheel on scene? Using react-spline
#151
Replies: 1 comment
-
|
tl;dr the resolution comes from how you embed. "The control mechanism depends entirely on the embed method. With a bare public iframe using a Spline share link, the scene runs in a cross-origin document that your page's JavaScript can't reach into—you can't toggle zoom, pan, or wheel behavior from your code. The only external lever is a CSS overlay with pointer-events: none, but that's all-or-nothing and blocks every interaction rather than selectively disabling scroll while preserving orbit controls.However, with the web component or the Runtime API, the scene runs inside your page in a canvas you own, so your code has full control. The editor's Play Settings become just defaults that you can override at runtime—you can add your own event handlers on the canvas, call the runtime to control the camera, and gate zoom behind specific interactions. This is where the user's mental model holds true: if zoom is disabled in the editor, you can re-enable and control it from your own code. The real power here is that you're not forced to choose between page scrolling and scene interactivity—you can intercept wheel events on the canvas yourself and decide whether to let them control the scene or pass through to the page.The key insight is that if you want to own the interaction logic, skip the bare iframe and use the web component or runtime instead, since the Spline website settings are just defaults you override in JavaScript. The specific issue in #151 where the scene scrolls off-screen is a symptom of trying to control interactions at the wrong layer; the fix is to own the wheel handler yourself. I should note that without their .splinecode URL, the Spline integration will be a functional but dormant slot with the interaction control already implemented, plus a strong on-brand SVG button as a fallback." [Opus 4.8] |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
Hello I have an issue where I'd like to embed a project into a webpage header, I've enabled page scroll however if you scroll down then page then back to the top the scene appears to capture the wheel event and scroll the scene off screen I'd like to disable this behaviour. But I cannot see how to do this in the docs
Beta Was this translation helpful? Give feedback.
All reactions