Disable Scroll Zoom in Maptoolkit Maps JS
When a map is embedded in a scrollable page, users often accidentally zoom the map instead of scrolling past it. Calling map.scrollZoom.disable() turns off scroll-to-zoom so the map no longer intercepts wheel events. Use this on documentation pages, portfolios, or any page where the map is decorative or secondary, and scrolling the page should take priority over zooming the map.
const API_KEY = 'YOUR_API_KEY';
const map = new maptoolkit.Map({
container: 'map',
apiKey: API_KEY,
style: `https://styles.maptoolkit.net/maptoolkit/maptoolkit.summer.json?api_key=${API_KEY}`,
center: [11.39085, 47.27574],
zoom: 12,
attributionControl: { compact: false }
});
map.addControl(new maptoolkit.NavigationControl(), 'top-right');
map.scrollZoom.disable();<!DOCTYPE html>
<html lang="en">
<head>
<title>Disable Scroll Zoom - Maptoolkit Maps JS</title>
<meta property="og:description" content="Disable scroll wheel zoom so the page scrolls normally over the map." />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://unpkg.com/@maptoolkit/maps@11.0.0-beta.3/dist/maptoolkit.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@maptoolkit/maps@11.0.0-beta.3/dist/maptoolkit.css" />
<style>
html, body { width: 100%; height: 100%; margin: 0; padding: 0; }
#map { width: 100%; height: 100%; }
#hint {
position: absolute;
top: 10px;
left: 50%;
transform: translateX(-50%);
background: rgba(0,0,0,0.6);
color: white;
padding: 8px 16px;
border-radius: .4rem;
font-family: sans-serif;
font-size: 14px;
pointer-events: none;
}
</style>
</head>
<body>
<div id="map"></div>
<div id="hint">Scroll zoom is disabled. Use the buttons to zoom.</div>
<script>
const API_KEY = 'YOUR_API_KEY';
const map = new maptoolkit.Map({
container: 'map',
apiKey: API_KEY,
style: `https://styles.maptoolkit.net/maptoolkit/maptoolkit.summer.json?api_key=${API_KEY}`,
center: [11.39085, 47.27574],
zoom: 12,
attributionControl: { compact: false }
});
map.addControl(new maptoolkit.NavigationControl(), 'top-right');
map.scrollZoom.disable();
</script>
</body>
</html>Use the prompt below with any LLM to get the same result. Make sure the Maptoolkit MCP server is connected first — check out AI Integration & MCP to get started.
How it works
map.scrollZoom.disable() turns off zooming with the wheel. Every interaction handler is a
separate object on the map, so this changes nothing else: dragging, double-click zoom and
keyboard navigation all keep working.
The problem it solves is real. A full-width map in a scrolling page swallows the wheel, and a user trying to scroll past ends up zoomed out to the ocean.
The usual compromise is to leave scroll zoom off until the user shows intent, by clicking the
map, and to re-enable it with scrollZoom.enable() at that point. A cooperativeGestures-style
pattern, requiring a modifier key, is the other common answer.
Zoom buttons should stay available when scroll zoom is off, or there is no way to zoom at all on a device without a trackpad gesture.
Next steps
Turning a gesture off works better when something replaces it, so the next step is deciding what: zoom buttons, a click that enables scrolling, or requiring a modifier key. Each suits a different kind of page.
The same question applies to touch, where the equivalent problem is a map that swallows a vertical swipe. Testing the page on a phone is what tells you whether you have fixed the problem or moved it.