JSFiddle - React, Tailwind, and code Playground

by hyperthalamus

HTML

<p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>

JavaScript

var height, offsetTop, speed, scrollTimer, speed = 2;

function refresh() {
    console.log("end reached");
}

function endReached() {
    clearInterval(scrollTimer);
    scrollTimer = window.setInterval(refresh, 20000);
}

function scrollWindow() {
    offsetTop += speed;
    $(document).scrollTop(offsetTop);
    if ($(window).scrollTop() == $(document).height() - $(window).height()) {
        endReached();
    }
}

function startTimer() {
    scrollTimer = window.setInterval(scrollWindow, 50);
}

$(function() {
    height = $(document).height();
    offsetTop = Math.random() * height;
    $(document).scrollTop(offsetTop);
    startTimer();
});