# scroll-zoom-clamp

> Prevent page scrolling interference by zooming components

Latest version **1.0.2** (published 2024-12-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install scroll-zoom-clamp
pnpm add scroll-zoom-clamp
yarn add scroll-zoom-clamp
bun add scroll-zoom-clamp
```

## Health

**Score 35/100 (D)** — status: maintenance-mode.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2024-12-14 |
| First published | 2023-12-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=12 |
| Dependencies | 0 |
| Unpacked size | 32.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | Vasco Asturiano |
| Maintainers | vasturiano |
| Keywords | scroll, zoom |

## Links

- npm: https://www.npmjs.com/package/scroll-zoom-clamp
- Repository: https://github.com/vasturiano/scroll-zoom-clamp
- Issues: https://github.com/vasturiano/scroll-zoom-clamp/issues
- npm.io page: https://npm.io/package/scroll-zoom-clamp

## Recent versions

- 1.0.2 (latest) — 2024-12-14
- 1.0.1 — 2023-12-07
- 1.0.0 — 2023-12-04
- 0.0.2 — 2023-12-04
- 0.0.1 — 2023-12-04

## README

scroll-zoom-clamp
=================

[![NPM package][npm-img]][npm-url]
[![Build Size][build-size-img]][build-size-url]
[![NPM Downloads][npm-downloads-img]][npm-downloads-url]

This DOM utility prevents zooming components from hijacking [mouse-wheel events](https://developer.mozilla.org/en-US/docs/Web/API/Element/wheel_event) 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

```js
import ScrollZoomClamp from 'scroll-zoom-clamp';
```
or using a *script* tag
```html
<script src="//unpkg.com/scroll-zoom-clamp"></script>
```
then
```js
// assuming a parentNode and a childNode element
parentNode.appendChild(
  new ScrollZoomClamp(childNode).node
);
```

## API reference

### Instantiation

new <b>ScrollZoomClamp</b>(<i>childNode</i>, { configOptions })

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

The following configuration options are available:

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

### Attributes

| Type | Attribute | Description |
| --- | --- | --- |
| Getter | <b>node</b> | Returns the wrapper DOM element. |

## Giving Back

[![paypal](https://www.paypalobjects.com/en_US/i/btn/btn_donate_SM.gif)](https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=L398E7PKP47E8&currency_code=USD&source=url) If this project has helped you and you'd like to contribute back, you can always [buy me a ☕](https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=L398E7PKP47E8&currency_code=USD&source=url)!

[npm-img]: https://img.shields.io/npm/v/scroll-zoom-clamp
[npm-url]: https://npmjs.org/package/scroll-zoom-clamp
[build-size-img]: https://img.shields.io/bundlephobia/minzip/scroll-zoom-clamp
[build-size-url]: https://bundlephobia.com/result?p=scroll-zoom-clamp
[npm-downloads-img]: https://img.shields.io/npm/dt/scroll-zoom-clamp
[npm-downloads-url]: https://www.npmtrends.com/scroll-zoom-clamp

---
_Source: https://npm.io/package/scroll-zoom-clamp · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._