var app = new PIXI.Application( { width: 800, height: 500, antialias: true, backgroundColor: 0xffffff } ) document.getElementById('canvas-placeholder').appendChild(app.view) var container = new PIXI.Container() container.x = 400 container.y = 250 app.stage.addChild(container) var background = new PIXI.Graphics() background.beginFill(0x323232) background.drawRect(-200,-100,400,200) container.addChild(background) var text = new PIXI.Text( 'This is a scrollable text.\n\n' + 'It merely demonstrates how the mousewheel events could be used.\n\n' + 'Notice it only scrolls if the cursor is inside the black box.\n\n' + 'Document scrolling is being blocked when scrolling on an active pixi display-object.\n\n' , { fontFamily: 'Arial', fontSize: 28, fill: 0xffffff, wordWrap: true, wordWrapWidth: 360 } ) text.x = -180 text.y = -80 container.addChild(text) text.mask = background.clone() container.addChild(text.mask) // THE ACTUAL USE CASE --------------- container.interactiveMousewheel = true container.on('mousewheel',(delta,event)=>{ text.y += delta*50 })