Touch-action CSS Properties Scrolling and zooming gestures

CSS Property touch-action is used to specify whether a given zone allows user action, and how to respond to user actions (such as a browser's own scrubbing, zooming, etc.)

By default, panning (scrolling) and zooming gestures are handled exclusively by the browser. This property is used to suppress browser default gesture behavior, and developers customize scrolling and gesture behavior.

Value of Touch-action:

Auto: When a touch event is sent on an element, it is up to the browser to decide what to do, such as viewport for smooth scaling.

None: No action is taken when a touch event occurs on an element

Pan-x: Enable single-finger horizontal panning gestures

Pan-y: Enables single-finger vertical panning gestures.

Manipulation: only scrolling and continuous scaling can be performed. such as double-click Zoom and other gestures

Pinch-zoom: Enable multi-finger panning and zooming of the page, which can be combined with any translational value such as touch-action:pan-x pan-y pinch-zoom;

The most common usage is to disable all gestures on elements (and their non-scrollable descendants) to use their own provided drag-and-drop and zoom behavior

Touch-action:none;

Another usage is to use a pointer event to handle a horizontally panning picture carousel, but not to interfere with the vertical scrolling or zooming of the page

Touch-action:pan-y Pinch-zoom;

Resolve Click event latency caused by double-click Zoom gesture

Touch-action:manipulation;

Touch-action CSS Properties Scrolling and zooming gestures