Vue-unwrap-element NPM

unwrap-element (TypeScript)

Easy solve problem of popup scroll freeze on mobile.

Motivation

The mobile popup has a page scrolling problem because the scrolling is not in the body itself. This module expands the element and hides everything around it, as like the element becomes the page itself and removes the page scrolling problem.

How to use it (few variants)

As script in browser

Add script

<script src=".../dist/unwrap-element.js"></script>

Use it

<div id="targetElement">Unwrap Test</div>

<script>
    const destroyUnwrap = unwrapElement('#targetElement');
    // TargetElement should place on all page
    // To revert all to previous state call destroyUnwrap();
    setTimeout(() => destroyUnwrap(), 5000);
</script>

As imported module

import unwrapElement from "unwrap-element";

const nodeOrSelector = '#targetElement';

/**
 * nodeOrSelector can be:
 * 1) #id
 * 2) .class
 * 3) domNode
 */

const destroyUnwrap = unwrapElement(nodeOrSelector);

// To revert all to previous state call destroyUnwrap();
setTimeout(() => destroyUnwrap(), 5000);

Api reference

const destroyUnwrap = unwrapElement(nodeOrSelector, {
  bypassSelectorsOrNodes: ['.class', '#id', domNode], // Optional
  beforeDestroy: async () => {}, // Optional, if returned false - prevent destroy
  beforeRestoreScroll: async () => {}, // Optional, if returned false - prevent restore scroll
  afterDestroy: async () => {}, // Optional
  
});