Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

How to enable the ability to scroll a page with Matter.js?

See original GitHub issue

I want to enable scrolling in a page that contains a Matter.js canvas. I have found and tried a few solutions such as removingEventListener without success. I created a post on StackOverflow but no luck with answers. Therefore I decided to come directly to the source of knowledge.

How can I enable page scrolling in a page with Matter.js? Thank you in advance.

Here’s the Codepen and the post.

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

Issue Analytics

State:
Created 3 years ago
Comments:6 (1 by maintainers)

Top GitHub Comments

12reactions

bouraqadicommented, Nov 1, 2020

The answer is provided by Xander Gottlieb in a blog post along with many other tips Matter.js— The Missing Tutorial.

By default, MouseConstraint captures scroll events. The following snippet fixes it.

mouseConstraint.mouse.element.removeEventListener("mousewheel", mouseConstraint.mouse.mousewheel);
mouseConstraint.mouse.element.removeEventListener("DOMMouseScroll", mouseConstraint.mouse.mousewheel);

3reactions

ayank007commented, Jun 14, 2022

I’m still unable to solve the problem in touch screen devices.