Wondering what’s next for npm?Check out our public roadmap! »

    fondle

    0.0.7 • Public • Published

    fondle

    Prevent mobile browser page scroll when touch.(Just like: Wechat, Safari ...);

    Demo

    Installation

    npm install --save fondle

    How to Use

    app.scss

    The container need have scrollbar and high enough to cover the screen.

    #container {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw; 
      height: 100vh;
      overflow: auto;
    }

    app.js

    For React

    import React, { Component } from 'react';
     
    import fondle from 'fondle';
     
    let entity;
     
    class Container extends Component {
      componentDidMount() {
        entity = fondle('#container');
      }
     
      componentDidUpdate() {
        entity.refresh();
      }
     
      componentWillUnmount() {
        entity.off();
      }
     
      render () {
        return (
          <div id="container">
            <div className="content">
              { ... }
            </div>
          </div>
        );
      }
    }

    For Classic

    Something you should know about MutationObserver.

    import fondle, { getEle, createObserver } from 'fondle';
     
    const dom = getEle('#container');
    const entity = fondle('#container');
     
    const observer = createObserver(entity.refresh);
    const observerOff = createObserver((list = []) => {
      const beenRemoved = list.some((item = {}) => {
        const { removedNodes = [] } = item;
     
        return Array.from(removedNodes).some(
          curr => curr === dom
        );
      });
     
      beenRemoved && entity.off();
    });
     
    observer.observe(dom, {
      childList: true,
      subtree: true,
    });
     
    observerOff.observe(document.body, {
      childList: true,
      subtree: true,
    });
     
    <html>
      <head>
        ...
      </head>
      <body>
        <div id="container">
          <div class="content">
            ...
          </div>
        </div>
      </body>
    </html>

    Keywords

    none

    Install

    npm i fondle

    DownloadsWeekly Downloads

    15

    Version

    0.0.7

    License

    MIT

    Last publish

    Collaborators

    • avatar