Skip to content

Instantly share code, notes, and snippets.

@nikhilkesari

nikhilkesari/app.js

Created November 7, 2017 06:16
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save nikhilkesari/14d48282e8afe7c6bb9c5543ff954e7b to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save nikhilkesari/14d48282e8afe7c6bb9c5543ff954e7b to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Nikhil S Kesari created this gist Nov 7, 2017.
    38 changes: 38 additions & 0 deletions app.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,38 @@
    import '../css/main.css';
    console.log("message");
    (function() {
    var observer;
    var index = 0;
    var options = {
    root: null,
    rootMargin: '0px',
    threshold: 0
    }

    function addNewBoxes(entry) {
    entry.forEach((change) => {
    if (change.isIntersecting && index <= 10) {
    console.log(index);
    index = ++index;
    createNewBox(index);
    }
    if (index === 10) {
    observer.disconnect();
    }
    });
    }

    function createNewBox(index) {
    var newDiv = document.createElement("div");
    var newContent = document.createTextNode(index);
    newDiv.setAttribute('class', 'bigbox');
    newDiv.appendChild(newContent);
    document.getElementById("main").appendChild(newDiv);
    observer.observe(newDiv);
    }

    observer = new IntersectionObserver(addNewBoxes, options);
    createNewBox(0);


    })();
    17 changes: 17 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,17 @@
    <!DOCTYPE html>
    <html>

    <head>
    <title>Hello Webpack</title>
    </head>

    <body>
    <div id="top"></div>
    <div id="main"></div>
    <footer>
    <div class="footer" id="footer">Footer</div>
    </footer>
    <script src="app.js"></script>
    </body>

    </html>