A viewport in a scrolling page

When a canvas sits in the middle of an article, it shouldn't trap the reader. Scrolling past it with a mouse wheel or a finger should scroll the page, and zooming should still work when the reader means it.

Scroll down past the map below. With the default settings, the wheel and one-finger drags would be taken by the viewport. These options leave them to the page:

wheel({ wheelZoom: false, trackpadPinch: true, trackpadPinchSpeed: 2.5 }): a plain wheel scrolls the page; a trackpad pinch (or Ctrl + wheel) zooms the map. trackpadPinchSpeed makes the pinch feel like a map app's.
drag({ wheel: false, disableOneFingerDrag: true }): one finger scrolls the page on phones; two fingers pan and pinch the map. A mouse still drags.

Wheel scrolls the page One finger scrolls the page

Turn an option off to feel the difference: the map starts capturing that input.

Why both settings matter

Desktop and mobile trap scrolling in different ways. On a desktop, the viewport listens for wheel events to zoom, so the page stops scrolling whenever the pointer passes over the canvas. On a phone, the drag plugin takes every one-finger touch, so a reader who starts a swipe on the map can't get past it.

The canvas also has to let the browser handle vertical swipes. pixi sets touch-action: none on its canvas, so set app.canvas.style.touchAction = 'pan-y' after creating the app. Leave out pinch-zoom so a pinch zooms the map, not the page.

Keep scrolling to check that the page moves normally even with the pointer or a finger over the map. This paragraph is here to give the page some length.

That's the end of the page.