Jump to content

Propagating mousewheel event to parent?


Recommended Posts

Hello there!

On my portfolio website, I'm using a Babylon scene as a splash page: https://rocketclowns.com/

When the user hovers their mouse over the Babylon scene, mousewheel events don't reach the parent, so users can't use their mouse to scroll down.

Is there a way to propagate the mousewheel events to restore normal scrolling behaviour on the page?


Many thanks in advance :)

Link to comment
Share on other sites

Wow, what a beautiful scene!!!  OMG!  Fantastic!

I don't have any mouse wheel solutions quite yet, but I might go hacking on camera.inputs.

Man, is that scene nice.  (drooooool)

Update:  Goofy test scene.  http://playground.babylonjs.com/#6FHKHC

A FreeCamera doesn't normally HAVE a mouseWheel observer, so I decided to hijack BABYLON.FreeCameraMouseInput.prototype.attachControl() and bring it into a playground.  The scene ONLY dumps mousewheel event-reports... to console, via line 63 area.  I don't know if this can be helpful AT ALL, but I wanted to goof around.  :)

In line 64 area, perhaps a guy could harvest the mouseWheel event just like arcRotateCam does...

      var event = p.event;
      var delta = 0;
      if (event.wheelDelta) {
          delta = event.wheelDelta / (_this.wheelPrecision * 40);
      else if (event.detail) {
          delta = -event.detail / _this.wheelPrecision;
      if (delta)
          _this.camera.inertialRadiusOffset += delta;  // perhaps remove this line, and hack here.
      if (event.preventDefault) {
          if (!noPreventDefault) {

Perhaps do some forcing.  :)  Those bottom 5 lines look interesting.

Link to comment
Share on other sites

Hi there. Just did a similar test to Wingy, and looks like babylon doesn't block the events, http://www.babylonjs-playground.com/#C3ZPAS.

Looking at your page source, I think the issue is that the scene is embedded in an iframe. You should be able to send the event (or a message) from the iframe to the parent either via window.parent or window.Postmessage

Link to comment
Share on other sites

Hey guys, thanks for the awesome feedback :)

@Deltakosh I'd be honoured to be highlighted on babylonjs.com with this scene! Maybe also as a demo for your awesome positional audio API :) ? Maybe you'd like to link to the source page here:



So far, I haven't been able to solve this puzzle. Setting 

pointer-events: none;

on the iframe CSS works - page scrolling behaves as expected - but disables all pointer events :(


Right now, I'm looking into re-dispatching the mousewheel event from the iframe, but haven't been successful yet. Something along these lines:

function bindIFrameMousemWheel(){
   	document.getElementById("animationframe").addEventListener("mousewheel", mouseWheelHandler, false);
	// Firefox
	document.getElementById("animationframe").addEventListener("DOMMouseScroll", mouseWheelHandler, false);


function mouseWheelHandler(e){
	// cross-browser wheel event
	var e = window.event || e; // old IE support


Thanks again for the compliments and pointers ;)!

Link to comment
Share on other sites

In your init function (in the iframe, main.js) you should be able to send a message to the parent page, something like

window.addEventListener("wheel", (e) => {
    window.parent.postMessage(e, "*");

and receive it there with something like this in your main page js

window.addEventListener("message", (e) => {
    //do something with the event


Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...