Matter.js —如何防止mouseConstraint捕获滚动事件？

如何解决Matter.js —如何防止mouseConstraint捕获滚动事件？

我试图启用滚动到包含Matter.js画布的页面的功能。我到处看，建议添加removeEventListener，以使鼠标约束不会劫持滚动事件。不幸的是，我没有成功。如何启用滚动？

提前谢谢！

import "./styles.css";
import Matter from "matter-js";

//Fetch our canvas
var canvas = document.getElementById("world");

//Setup Matter JS
var engine = Matter.Engine.create();
var world = engine.world;
var render = Matter.Render.create({
  canvas: canvas,engine: engine,options: {
    width: 500,height: 500,background: "transparent",wireframes: false,showAngleIndicator: false
  }
});

//Add a ball
var ball = Matter.Bodies.circle(250,250,50,{
  density: 0.04,friction: 0.01,frictionAir: 0.00001,restitution: 0.8,render: {
    fillStyle: "#F35e66",strokeStyle: "black",linewidth: 1
  }
});
Matter.World.add(world,ball);

//Add a floor
var floor = Matter.Bodies.rectangle(250,520,500,40,{
  isstatic: true,//An immovable object
  render: {
    visible: false
  }
});
Matter.World.add(world,floor);

//Make interactive
var mouseConstraint = Matter.MouseConstraint.create(engine,{
  //Create Constraint
  element: canvas,constraint: {
    render: {
      visible: false
    },stiffness: 0.8
  }
});
Matter.World.add(world,mouseConstraint);

// Why is this not working?
mouseConstraint.mouse.element.removeEventListener(
  "mousewheel",mouseConstraint.mouse.mousewheel
);
mouseConstraint.mouse.element.removeEventListener(
  "DOMMouseScroll",mouseConstraint.mouse.mousewheel
);

//Start the engine
Matter.Engine.run(engine);
Matter.Render.run(render);

解决方法

这是HTML问题。在index.html中，将overflow设置为scroll