JSFiddle - React, Tailwind, and code Playground

by Terry Mun

HTML

<p>Random content above.</p>
<div id="big">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
    <p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    <p>Sed pharetra porta libero, in placerat massa scelerisque vel. Cras at mi nunc, id ornare eros. Duis orci nulla, lobortis vitae vehicula eu, lacinia eu dui. Nulla quis pharetra dolor.</p>
    <p>Nam justo metus, feugiat eget placerat sed, eleifend vel eros. Sed purus est, adipiscing in rhoncus sit amet, accumsan eu arcu. Donec blandit ante nec urna tempor pretium.</p>
    <p>Nulla feugiat elementum aliquam. Fusce tellus nisl, commodo vel placerat nec, ultricies eget mauris. Fusce interdum fermentum nisi at euismod. Donec ultrices ornare semper.</p>
    <p>Suspendisse luctus, dui eu iaculis iaculis, ipsum quam vestibulum magna, in congue justo magna id nunc. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
    <p>Etiam ut elit ac lacus congue tempor eget non mauris. Ut luctus velit vitae arcu consectetur sit amet bibendum sapien pretium. Pellentesque nec metus nisi.</p>
    <p>Fusce consequat gravida dui sit amet vehicula. Pellentesque id tempus elit. Ut vel nibh nec tortor convallis adipiscing in et felis.</p>
    <p>Aliquam erat volutpat. Fusce tortor turpis, suscipit in aliquet vel, aliquet vel orci. Sed non nisl sem. Integer in purus lorem.</p>
    <p>Integer porttitor dictum viverra. Suspendisse luctus, purus ac malesuada accumsan, nibh magna sodales tortor, eu adipiscing...

CSS

#big {
    background-color: lightgreen;
    width: 350px;
    max-height: 1500px;
    white-space: nowrap;
    overflow-x: scroll;
}
    /* Applies only when JS is enabled in browser */
    #scroll-wrap #big {
        overflow-y: hidden;
    }
p {
    margin-bottom: 2em;
}

JavaScript

$(document).ready(function () {
    // Create wrap around element
    $('#big').wrap('<div id="scroll-wrap" />');
    
    // Function: resize element when scrolling
    function recalcHeight() {
         $('#big').css({
             'height': $(window).height() + $(window).scrollTop() - $('#big').offset().top
         });       
    }
    
    // Resize wrap around element upon resize
    $(window).resize(function () {
        $('#scroll-wrap').css({
            'height': $('#big').css('max-height')
        });
    }).resize(); // Fires resize() event onload
    
    // Recalculate height upon load, and upon scroll
    recalcHeight();
    $(window).scroll(function () {
        recalcHeight();
    });
});