Overlays and nested scrolling

Apps put scrollable things on top of the viewport: HTML panels, and lists drawn in pixi itself. Scrolling one of those shouldn't zoom the map underneath.

pixi list calls stopPropagation()

The list on the left is drawn in pixi, inside the viewport. Scroll it, then turn the option off and scroll it again: the map zooms too.

A list drawn in pixi

A pixi object inside the viewport receives the wheel event first. Calling stopPropagation() on it keeps the viewport from zooming (new in v7).

An HTML panel

An HTML element that sits next to the canvas, like the panel above, never sends its wheel events to the viewport. That's the simplest setup: put overlays beside the canvas, not inside the element pixi listens on.

If your overlays have to live inside the element pixi listens on (for example, you called app.renderer.events.setTargetElement(wrapper) on a wrapper around the canvas and your panels), the viewport sees their wheel events too. Turn on ignoreWheelFromOtherElements so it only handles wheel events aimed at the canvas: