Preventing Mouse Wheel Zoom in Map While Allowing Page Scroll

Updated on Jan 20, 2026

Environment

Product

Progress® Kendo UI for Angular Map

Description

How can I prevent the Map from zooming when the user scrolls with the mouse wheel? When the mouse pointer is over the Map, the wheel zoom behavior prevents normal page scrolling, which affects the user experience.

This Knowledge Base article also answers the following questions:

• How to disable mouse wheel zoom in Kendo UI for Angular Map?
• How to allow page scrolling while the mouse is over the Kendo UI for Angular Map?

Solution

To disable mouse wheel zoom while allowing normal page scrolling:

1. Attach a handler to the zoomStart event of the Map.

   html

   <kendo-map
     (zoomStart)="onZoomStart($event)"
   >
     <kendo-map-layers>
       <kendo-map-shape-layer
         [data]="data"
       >
       </kendo-map-shape-layer>
     </kendo-map-layers>
   </kendo-map>

2. Call preventDefault() on the event to stop the zoom behavior.

   typescript

   onZoomStart(e: ZoomStartEvent): void {
     e.preventDefault();
   }

3. Forward the scroll delta to the window using scrollBy() to enable page scrolling.

   typescript

   onZoomStart(e: ZoomStartEvent): void {
     e.preventDefault();
     window.scrollBy({ top: e.originalEvent.deltaY, behavior: 'auto' });
   }

See Also

• Map Overview
• Map API Reference
• Map Zoom Configuration
• Map Events