This plugin for pixi.js automatically dispatches mousewheel scroll events for pixi display-objects. It only fires the event for objects that are interactive and have a special flag set. When scrolling a said display-object, the default document scroll is being blocked. Additionally, it normalizes the mousewheel delta for cross-browser consistency.
Simple text scroll usage example
To enable mousewheel events for any display-object, set the interactiveMousewheel flag on it to true.
The mousewheel event will be dispatched via the standard pixi EventEmitter.
displayObject.interactiveMousewheel = true
displayObject.on('mousewheel', (delta, event) => {
myOtherDisplayObject.y += delta * 100
})
- The
deltais the amount of scrolling normalized to [-1,1]. - The
eventis the native DOMmousewheelevent. Use this if you need the raw data.
Include the dist/pixi-mousewheel.js or dist/pixi-mousewheel.min.js in your html document after pixi.js.