1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Matter.jsでcanvas上でスクロールできる方法

Posted at

案件だmatter.jsを使ったのでそこで詰まったポイント紹介いたします。

#スクロールできない
matte.jsではcanvas上でスクロールできないみたいです、、

#解決方法
removeEventListenerでスクロールできるようにする。


//マウス操作
var mouseConstraint = MouseConstraint.create(engine, {
  element: container, //マウス操作を感知する要素を指定(DEMOでは生成したcanvasを指定)
  constraint: {
    render: {
      strokeStyle: "rgba(0, 0, 0, 0)", //マウス操作の表示を隠す
    },
  },
});
//以下のコードを記述
mouseConstraint.mouse.element.removeEventListener(
  "mousewheel",
  mouseConstraint.mouse.mousewheel
);
mouseConstraint.mouse.element.removeEventListener(
  "DOMMouseScroll",
  mouseConstraint.mouse.mousewheel
);


マウス操作を記述してるコードの下に、removeEventListenerを記述してください。

#まとめ
PCはこれでスクロールもドラックもできるようになるのですが、スマホはできないままです。。
スマホでもスクロールできる方法あれば教えてください。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?