☰

Auto-scroll new posts

Auto-scroll to the bottom of page when new posts are added

// ==UserScript==
// @name         Auto-scroll new posts
// @author       Joshh
// @namespace    https://tljoshh.com
// @version      0.1
// @description  Auto-scroll to the bottom of page when new posts are added
// @match        *://*.websight.blue/thread/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=websight.blue
// @license MIT
// ==/UserScript==

(function() {
    'use strict';
    main();

    function main() {
        const postsContainer = document.querySelector('#messages');
        const nextPageBtn = document.querySelector('#nextpage');

        startMutationObserver(postsContainer);
        startNextPageObserver(nextPageBtn);
    }

    // Add event listener to any posts added to DOM via livelinks
    function startMutationObserver(targetNode) {
        // Options for the observer (which mutations to observe)
        const config = { childList: true, attributes: true, attributeFilter: ['style'] };

        // Callback function to execute when mutations are observed
        const callback = (mutationList, observer) => {
            // For all mutations made to the target node, check if any nodes were added...
            for (const mutation of mutationList) {
                handleMutation(mutation);
            }
        };

        // Create an observer instance linked to the callback function
        const observer = new MutationObserver(callback);

        // Start observing the target node for configured mutations
        observer.observe(targetNode, config);
    }

    // Handle any changes made to the messages container.
    function handleMutation(mutation) {
        // For all nodes that were added, scroll to the bottom of the page.
        if(mutation.addedNodes.length) {
            for (const addedNode of mutation.addedNodes) {
                if (!addedNode.tagName) continue; // Not an element
                if(addedNode.classList.contains('post')) {
                    if(document.body.scrollTop >= document.body.scrollHeight - window.innerHeight * 2) {
                        addedNode.scrollIntoView({ behavior: 'smooth' });
                    }
                }
            }
        }
    }

    function startNextPageObserver(targetNode) {
        // Options for the observer (which mutations to observe)
        const config = { attributes: true, attributeFilter: ['style'] };

        // Callback function to execute when mutations are observed
        const callback = (mutationList, observer) => {
            for (const mutation of mutationList) {
                if(mutation.type === 'attributes') {
                    setTimeout(() => targetNode.click(), 1500);
                }
            }
        };

        // Create an observer instance linked to the callback function
        const observer = new MutationObserver(callback);

        // Start observing the target node for configured mutations
        observer.observe(targetNode, config);
    }
})();