问题描述
我试图启用滚动到包含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