Automatic scroll of Instagram page, stop scrolling by hand...

scroll_instagram.js

/*
 Tired of scrolling to one of the last photos on the page on Instagram? Let your
 browser do the scrolling for you!
 31-05-2017
 (c) 2017 - Loran Kloeze - [email protected]
 29-05-2020
 (c) 2020 - Deep Mehta - https://github.com/Imdeepmehta
 
 Usage
  - Go to https://www.instagram.com/instagram_handle/ (change instagram_handle in i.e. taylorswift)
  - Open up the console (F12) (Firefox users: type 'allow pasting' if you haven't done so yet)
  - Select the contents of this complete file and copy/paste it to the console and hit enter
  - You may close the console now
  - A UI pops up at the left, click on the button to start scrolling
  - If you scroll with the mouse, the autoscroll stops
*/

(function() {
    'use strict';
    var weAreScrolling = false;
    var scrollTimer = null, btnToggle = null;

    function pageScroll() {
        if(weAreScrolling){
            var scrolldelay = null;
            window.scrollBy(0,1);
            scrolldelay = setTimeout(pageScroll,6);
        }
    }

    function startScrolling(){
        weAreScrolling = true;
        btnToggle.innerHTML = 'Stop autoscroll';
        btnToggle.classList.add('active');
        pageScroll()
    }

    function stopScrolling(){
        weAreScrolling = false;
        if (btnToggle) {
            btnToggle.innerHTML = 'Start autoscroll';
            btnToggle.classList.remove('active');
        }
        if (scrollTimer)
            clearInterval(scrollTimer);
    }

    // Little UI overlay
    var style = "";
    style += "#lokl_guiContainer {position: fixed; width: 100px; height: 100px; top: 5px; left: 5px; background-color: rgba(255, 193, 7, 0.31); padding: 15px;";
    style += "       font-family: -apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif; font-size: 14px; font-weight: 600; border: solid 1px rgb(255, 193, 7); border-radius: 3px;} ";
    style += "#lokl_toggleScroll {padding: 5px 2px; border-radius: 3px; text-align: center; background-color: #35b13d; color: white;}";
    style += "#lokl_toggleScroll:hover {background-color: #2e9835; cursor: pointer;}";
    style += "#lokl_toggleScroll.active {background-color: #bb3a30; }";
    style += "#lokl_toggleScroll.active:hover {background-color: #a9342b; }";
    var styleEl = document.createElement("style");
    styleEl.innerHTML = style;
    document.body.appendChild(styleEl);

    var guiContainer = document.createElement('div');
    document.body.append(guiContainer);
    guiContainer.id = 'lokl_guiContainer';

    btnToggle = document.createElement('a');
    guiContainer.append(btnToggle);
    btnToggle.id = 'lokl_toggleScroll';
    btnToggle.innerHTML = 'Start autoscroll';
    window.addEventListener('wheel', function(e) {
        // User starts scrolling, we stop
        stopScrolling();
    });

    btnToggle.addEventListener('click', function(){
        if (weAreScrolling) {
            stopScrolling();
        } else {
            startScrolling();
        }
    });
})();