scroll-zoom-clamp
!NPM packagenpm-imgnpm-url
!Build Sizebuild-size-imgbuild-size-url
!NPM Downloadsnpm-downloads-imgnpm-downloads-urlThis 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. |