JSFiddle - React, Tailwind, and code Playground

by Gaspar

HTML

<div id="text_div"></div>

CSS

#text_div {
    color: #ffffff;
    width: 400px;
    height: 250px;
    overflow:hidden;
    background-color: #000000;
}

JavaScript

var scroll_speed = 100
var last_scroll_position = localStorage.scroll_position || 0;
var the_text =
    "Lorem ipsum dolor sit amet, pellentesque libero metus quis sed et vestibulum, ut eget, turpis sed consequat, possimus quis, mi nec leo at wisi interdum posuere. Eu dui vitae, quis habitasse arcu arcu neque, odio enim.<br><br>Amet luctus lectus morbi massa nec, metus cras in molestie dolor, congue sodales viverra odio libero neque. Egestas vulputate vitae libero sodales, pharetra nec ligula vitae, tellus viverra ac vel, amet in sit eget.<br><br>Sit morbi tortor dictum viverra, massa molestie est urna suscipit felis massa, mi dictumst magna blandit, fringilla ut arcu nam urna ut in, et eget mauris metus integer ante.<br><br>Natoque egestas donec, ligula nam sit, ipsum a id, pellentesque in, commodo est eu phasellus sem et. Ut leo elit bibendum, posuere cras et nec, fames in wisi porta ac eleifend. Odio iaculis arcu, dapibus eget in imperdiet, dolor eleifend bibendum eget wisi quis, ultrices metus et lacinia integer. At pellentesque quam sapien, duis faucibus nisl eu dapibus, amet venenatis dictumst quis dictum.<br><br>Adipiscing gravida, massa mi ac, suscipit porta consequat pretium lobortis lacus, nullam facilisis ac gravida habitant, sed faucibus et at porta aliquet.";
document.getElementById("text_div").innerHTML = the_text.substring(localStorage.start_position || 0);
window.addEventListener("wheel", function(e) {
    if (e.deltaY < 0 && last_scroll_position > 0) {
        last_scroll_position--;
    }
    if (e.deltaY > 0 && last_scroll_position * scroll_speed < the_text.length ) {
        last_scroll_position++;
    }
    var text_start = last_scroll_position * scroll_speed;
    if (text_start != 0) {
        while (
            the_text.length > text_start &&
            the_text.charAt(text_start) != " "
        ) {
            text_start++;
        }
    }
    document.getElementById("text_div").innerHTML = the_text.substring(text_start);
   ...