touch-action scrolling

borrowed/adapted from Matt Gaunt's Touch Action Options. visually illustrates effect of various touch-action values on browser's default scroll behavior. below are containers with overflow: auto, containing coloured boxes – notice how touch-action influences the kind of interaction the browser handles/allows. the intercepted movements (which are not handled by the browser) could then be intercepted by Pointer Events in JavaScript (not shown here).

touch-action: auto

touch-action: none

touch-action: pan-x

touch-action: pan-y

touch-action: pan-right

touch-action: pan-down

touch-action: pan-x pinch-zoom