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 ☕!