javascript - 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
推荐阅读
- python - 我正在尝试在被跟踪的对象上绘制一个 3D 立方体(使用 ORB 和对象的单应性)-opencv Python
- laravel - 如何在我正在进行的项目中添加模板。(依赖冲突)
- php - 正则表达式将数据属性添加到所有图像链接
- docker - Jenkins Agent 无法运行程序“docker”:错误=2,没有这样的文件或目录
- pixel - 查找圆上的所有像素
- javascript - 将数据从 API 推送到数组
- node.js - 使用 fs.createReadStream 通过 POST 发送文件不会发送文件
- java - TransformerException:无效的 XML 字符(Unicode:0x4)
- javascript - $location.path 没有重定向到 Angular JS 中的页面
- apache-spark - Parquet 和 Spark 中的分区策略