Bloqueo del desplazamiento de una página web-Scroll-Lock

Vista prévia

Descripción

Scroll-Lock es un plugin de JavaScript puro utilizado para bloquear el comportamiento de desplazamiento de una página web.

Los casos de uso típicos de este complemento es mantener la posición de contenido principal fija cuando una ventana modal larga está activa.

Soporta tanto dispositivos de escritorio como móviles.

Funcionamiento

Descargue & Instale el bloqueo de desplazamiento.

# NPM
$ npm install scroll-lock --save

Importe el bloqueo de desplazamiento.

// ES 6
import scrollLock from 'scroll-lock';

// CommonJS:
const scrollLock = require('scroll-lock');

O cargue directamente el archivo JavaScript en el documento.

<script src="scroll-lock.js"></script>

Desactive el desplazamiento de página.

scrollLock.disablePageScroll(element);

Habilite el desplazamiento de la página.

scrollLock.enablePageScroll();

Especifique qué elemento necesita rellenar el espacio.

addFillGapTarget(element);

Borra el valor de la cola.

clearQueueScrollLocks();

Alternar el desplazamiento de la página.

scrollLock.toggle();

Métodos de API más útiles.

// Get state of scrollbar.
getScrollState();

 // Get width of scrollbar.
getPageScrollBarWidth();

// Get current width of scrollbar.
getCurrentPageScrollBarWidth();

// Add/remove scrollable elements
addScrollableSelector('.element');
removeScrollableSelector('.element');
addScrollableTarget(element);
removeScrollableTarget(element);

// Add/remove lockable elements
addLockableSelector('.my-lockable-selector');
addLockableTarget(element);

// Add/remove fill gap
addFillGapSelector('.element');
removeFillGapSelector('.element');
addScrollableTarget(element);
removeFillGapTarget(element);

// Set the method of filling the gap
setFillGapMethod('margin');

// Recalculates filled gaps
refillGaps();

Registro de cambios

v2.1.0 (03/02/2019)

• Algoritmo de manejo de eventos táctiles más avanzado
• Soporte de desplazamiento horizontal
• Compatibilidad con elementos desplazables anidados
• Compatibilidad con TextArea anidada y contentEditable
• Nueva API

10/06/2018

• Fix touchmove preventDefault iOS 11.3 +