tabindex without focux condition

This commit is contained in:
Andreas Hocevar
2019-11-13 22:51:45 +01:00
parent 8b036ba96c
commit 643a3ad86b
5 changed files with 42 additions and 22 deletions

View File

@@ -1,14 +0,0 @@
---
layout: example.html
title: Interaction Options
shortdesc: Shows interaction options for custom scroll and zoom behavior.
docs: >
This example uses a custom `ol/interaction/defaults` configuration:
by default, wheel/trackpad zoom and drag panning is always active, which
can be unexpected on pages with a lot of scrollable content and an embedded
map. To perform wheel/trackpad zoom and drag-pan actions only when the map
has the focus, set `onFocusOnly: true` as option. This requires a map div
with a `tabindex` attribute set.
tags: "trackpad, mousewheel, zoom, scroll, interaction, fractional"
---
<div tabindex="1" id="map" class="map"></div>

10
examples/page-scroll.html Normal file
View File

@@ -0,0 +1,10 @@
---
layout: example.html
title: Page Scrolling
shortdesc: Shows a map that does not interrupt page scrolling.
docs: >
To perform wheel/trackpad zoom and drag-pan actions only when the map
has the focus, configure your map div with a `tabindex` attribute.
tags: "trackpad, mousewheel, zoom, scroll, page"
---
<div tabindex="1" id="map" class="map"></div>

View File

@@ -1,14 +1,10 @@
import Map from '../src/ol/Map.js';
import View from '../src/ol/View.js';
import {defaults as defaultInteractions} from '../src/ol/interaction.js';
import TileLayer from '../src/ol/layer/Tile.js';
import OSM from '../src/ol/source/OSM.js';
const map = new Map({
interactions: defaultInteractions({
onFocusOnly: true
}),
layers: [
new TileLayer({
source: new OSM()