---
title: "ScrollZoomHandler | JavaScript maps SDK"
description: "Documentation for MapTiler SDK"
---

> For AI agents: a documentation index is available at [/llms.txt](https://docs.maptiler.com/llms.txt). Markdown versions of all pages are available by appending .md to any URL.

# Class ScrollZoomHandler`Maptiler`

The `ScrollZoomHandler` allows the user to zoom the map by scrolling.

#### Hierarchy ([View Summary](https://docs.maptiler.com/sdk-js/api-reference/hierarchy/#ScrollZoomHandler))

-   [ScrollZoomHandler](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.ScrollZoomHandler/)
    -   ScrollZoomHandler

##### Index

### Constructors[](#constructors)

[constructor](#constructor)

### Methods[](#methods)

[disable](#disable) [enable](#enable) [isActive](#isactive) [isEnabled](#isenabled) [isZooming](#iszooming) [renderFrame](#renderframe) [reset](#reset) [setWheelZoomRate](#setwheelzoomrate) [setZoomRate](#setzoomrate) [wheel](#wheel)

## Constructors[](#constructors-1)

### `Maptiler`constructor[](#constructor)

-   new ScrollZoomHandler(  
        map: [MapLibreMap](https://docs.maptiler.com/sdk-js/api-reference/classes/MapLibreMap/) | [Map](https://docs.maptiler.com/sdk-js/api-reference/classes/Map/),  
        triggerRenderFrame: () \=> void,  
    ): ScrollZoomHandler[](#constructorscrollzoomhandler)
    
    #### Parameters
    
    -   map: [MapLibreMap](https://docs.maptiler.com/sdk-js/api-reference/classes/MapLibreMap/) | [Map](https://docs.maptiler.com/sdk-js/api-reference/classes/Map/)
    -   triggerRenderFrame: () \=> void
    
    #### Returns ScrollZoomHandler
    
    Overrides [ScrollZoomHandler](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.ScrollZoomHandler/).[constructor](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.ScrollZoomHandler/#constructor)
    

## Methods[](#methods-1)

### disable[](#disable)

-   disable(): void[](#disable-1)
    
    Disables the "scroll to zoom" interaction.
    
    #### Returns void
    
    #### Example[](#example)
    
    ```typescript
    map.scrollZoom.disable();
    ```
    
    Inherited from [ScrollZoomHandler](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.ScrollZoomHandler/).[disable](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.ScrollZoomHandler/#disable)
    

### enable[](#enable)

-   enable(options?: boolean | [AroundCenterOptions](https://docs.maptiler.com/sdk-js/api-reference/types/AroundCenterOptions/)): void[](#enable-1)
    
    Enables the "scroll to zoom" interaction.
    
    #### Parameters
    
    -   `Optional`options: boolean | [AroundCenterOptions](https://docs.maptiler.com/sdk-js/api-reference/types/AroundCenterOptions/)
        
        Options object.
        
    
    #### Returns void
    
    #### Example[](#example-1)
    
    ```typescript
    map.scrollZoom.enable();
    map.scrollZoom.enable({ around: 'center' })
    ```
    
    Inherited from [ScrollZoomHandler](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.ScrollZoomHandler/).[enable](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.ScrollZoomHandler/#enable)
    

### isActive[](#isactive)

-   isActive(): boolean[](#isactive-1)
    
    This is used to indicate if the handler is currently active or not. In case a handler is active, it will block other handlers from getting the relevant events. There is an allow list of handlers that can be active at the same time, which is configured when adding a handler.
    
    #### Returns boolean
    
    Inherited from [ScrollZoomHandler](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.ScrollZoomHandler/).[isActive](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.ScrollZoomHandler/#isactive)
    

### isEnabled[](#isenabled)

-   isEnabled(): boolean[](#isenabled-1)
    
    Returns a Boolean indicating whether the "scroll to zoom" interaction is enabled.
    
    #### Returns boolean
    
    `true` if the "scroll to zoom" interaction is enabled.
    
    Inherited from [ScrollZoomHandler](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.ScrollZoomHandler/).[isEnabled](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.ScrollZoomHandler/#isenabled)
    

### isZooming[](#iszooming)

-   isZooming(): boolean[](#iszooming-1)
    
    #### Returns boolean
    
    Inherited from [ScrollZoomHandler](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.ScrollZoomHandler/).[isZooming](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.ScrollZoomHandler/#iszooming)
    

### renderFrame[](#renderframe)

-   renderFrame(): {  
        around: [Point](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Point/);  
        needsRenderFrame: boolean;  
        noInertia: boolean;  
        originalEvent: any;  
        zoomDelta: number;  
    }[](#renderframe-1)
    
    `renderFrame` is the only non-dom event. It is called during render frames and can be used to smooth camera changes (see scroll handler).
    
    #### Returns {  
        around: [Point](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Point/);  
        needsRenderFrame: boolean;  
        noInertia: boolean;  
        originalEvent: any;  
        zoomDelta: number;  
    }
    
    Inherited from [ScrollZoomHandler](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.ScrollZoomHandler/).[renderFrame](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.ScrollZoomHandler/#renderframe)
    

### reset[](#reset)

-   reset(): void[](#reset-1)
    
    `reset` can be called by the manager at any time and must reset everything to it's original state
    
    #### Returns void
    
    Inherited from [ScrollZoomHandler](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.ScrollZoomHandler/).[reset](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.ScrollZoomHandler/#reset)
    

### setWheelZoomRate[](#setwheelzoomrate)

-   setWheelZoomRate(wheelZoomRate: number): void[](#setwheelzoomrate-1)
    
    Set the zoom rate of a mouse wheel
    
    #### Parameters
    
    -   wheelZoomRate: number
        
        1/450 The rate used to scale mouse wheel movement to a zoom value.
        
    
    #### Returns void
    
    #### Example[](#example-2)
    
    Slow down zoom of mouse wheel
    
    ```typescript
    map.scrollZoom.setWheelZoomRate(1/600);
    ```
    
    Inherited from [ScrollZoomHandler](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.ScrollZoomHandler/).[setWheelZoomRate](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.ScrollZoomHandler/#setwheelzoomrate)
    

### setZoomRate[](#setzoomrate)

-   setZoomRate(zoomRate: number): void[](#setzoomrate-1)
    
    Set the zoom rate of a trackpad
    
    #### Parameters
    
    -   zoomRate: number
        
        1/100 The rate used to scale trackpad movement to a zoom value.
        
    
    #### Returns void
    
    #### Example[](#example-3)
    
    Speed up trackpad zoom
    
    ```typescript
    map.scrollZoom.setZoomRate(1/25);
    ```
    
    Inherited from [ScrollZoomHandler](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.ScrollZoomHandler/).[setZoomRate](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.ScrollZoomHandler/#setzoomrate)
    

### wheel[](#wheel)

-   wheel(e: [WheelEvent](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.WheelEvent/)): void[](#wheel-1)
    
    #### Parameters
    
    -   e: [WheelEvent](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.WheelEvent/)
    
    #### Returns void
    
    Inherited from [ScrollZoomHandler](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.ScrollZoomHandler/).[wheel](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.ScrollZoomHandler/#wheel)