How to block the page scroll while scrolling inside a Pixi.js canvas

I’ve created a function to block the scroll of a parent container div or page when the mouse is on the Pixi canvas, for example, for Facebook games, the Facebook page scroll interferes on the game's scrolling. Currently, Pixi does not support any "mousewheel" event, so the DOM event is the one used when creating scrolls and listening to the user's mouse scroll event.

Working as expected on Chrome, Safari and Edge. On Firefox, the scroll is blocked both on the parent div or document and the pixi canvas, so the game scrolls instead, needs to be dragged.

Learn Pixi.js

In your project, you need to call blockParentPageScroll() function before defining the pixi renderer.

blockParentPageScroll()
{
   // 2017 recommended event
 document.body.addEventListener("wheel", function(event){
      event.preventDefault()
   }, false);

 // Before 2017, IE9, Chrome, Safari, Opera
 document.body.addEventListener("mousewheel", function(event){
      event.preventDefault()
   }, false);

 // Old versions of Firefox
 document.body.addEventListener("DOMMouseScroll", function(event){
      event.preventDefault()
   }, false);
}

I’ve created this example to test it quickly from the browsers:

Advanced Game Design with HTML5 and JavaScript