Merge pull request #10332 from ahocevar/no-touch-action-css

Conditional default prevention instead of touch-action: none

examples/two-finger-pan-scroll.html

@@ -0,0 +1,12 @@
+---
+layout: example.html
+title: Panning and page scrolling
+shortdesc: Shows a map that allows page scrolling unless two fingers or Cmd/Ctrl are used to pan the map.
+docs: >
+  This example shows a common behavior for page scrolling: on touch devices, when one finger
+  is placed on the map, it can be used to scroll the page. Only two fingers will perform drag pan.
+  For mouse or trackpad devices, the platform modifier key (Cmd or Ctrl) will enable drag pan on
+  the map, otherwise the page will scroll.
+tags: "trackpad, mousewheel, zoom, scroll, page"
+---
+<div id="map" class="map"></div>

examples/two-finger-pan-scroll.js

@@ -0,0 +1,29 @@
+import Map from '../src/ol/Map.js';
+import View from '../src/ol/View.js';
+import TileLayer from '../src/ol/layer/Tile.js';
+import OSM from '../src/ol/source/OSM.js';
+import {defaults, DragPan, MouseWheelZoom} from '../src/ol/interaction.js';
+import {platformModifierKeyOnly} from '../src/ol/events/condition.js';
+
+const map = new Map({
+  interactions: defaults({dragPan: false, mouseWheelZoom: false}).extend([
+    new DragPan({
+      condition: function(event) {
+        return this.getPointerCount() === 2 || platformModifierKeyOnly(event);
+      }
+    }),
+    new MouseWheelZoom({
+      condition: platformModifierKeyOnly
+    })
+  ]),
+  layers: [
+    new TileLayer({
+      source: new OSM()
+    })
+  ],
+  target: 'map',
+  view: new View({
+    center: [0, 0],
+    zoom: 2
+  })
+});