scroll-zoom-clamp

This DOM utility prevents zooming components from hijacking mouse-wheel events and interfering with the natural scroll of a page.

By wrapping a child element with this component, wheel events are only propagated downstream if a modifier key is pressed (ctrl or meta key - ⌘, ⊞), otherwise a message is overlayed informing the user to do so by pressing the key.

Quick start

import ScrollZoomClamp from 'scroll-zoom-clamp';

or using a script tag

<script src="//unpkg.com/scroll-zoom-clamp"></script>

then

// assuming a parentNode and a childNode element
parentNode.appendChild(
  new ScrollZoomClamp(childNode).node
);

API reference

Instantiation

new ScrollZoomClamp(childNode, { configOptions })

Creates a new scroll zoom protection, wrapped around the childNode element.

The following configuration options are available:

| Config option | Description | | --- | --- | | message: str | Ability to customize the message shown when the zoom is blocked. Supports plain text or HTML content. |

Attributes

| Type | Attribute | Description | | --- | --- | --- | | Getter | node | Returns the wrapper DOM element. |

Giving Back

If this project has helped you and you'd like to contribute back, you can always buy me a ☕!