JSFiddle - React, Tailwind, and code Playground

HTML

<div class="content">
    <div class="left">карта</div>
    <div class="right">
        <div class="top">
            <button>меньше</button> <span>скорость</span>

            <button>больше</button>
        </div>
        <div class="bottom">
            <div class="wrap">
                 <h4>Blabla</h4>

                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore sint debitis culpa quas illum iusto quia recusandae voluptatum sequi non doloremque voluptatem ipsa labore quae assumenda tempora magni corrupti excepturi!</p>
                <p>Dignissimos in temporibus eius tempora cupiditate ut repudiandae laudantium velit explicabo quam doloribus molestias autem sit aliquam debitis perspiciatis unde non accusamus placeat quos quo obcaecati nam iste at illo?</p>
                <p>Totam autem dignissimos dolorum repellendus error aspernatur aliquid maiores inventore! Sequi possimus ad aliquam itaque labore minima dignissimos sunt excepturi dolorem reiciendis molestiae ea esse unde doloribus expedita deleniti porro.</p>
                <p>Eius debitis laborum suscipit doloribus voluptate repellendus possimus numquam nemo impedit blanditiis cumque ab tempora velit harum cupiditate a cum provident. Dignissimos culpa itaque temporibus adipisci eius magnam error repudiandae.</p>
                <p>Quidem voluptate molestias assumenda repellat accusantium deserunt nesciunt iure facilis facere culpa tempora praesentium deleniti natus unde libero officiis commodi repudiandae. Nesciunt fugiat et alias quos architecto earum nisi assumenda.</p>
                <p>Necessitatibus consectetur voluptates quibusdam maxime natus quae temporibus obcaecati quos eius fugiat ea explicabo nemo earum dolore soluta dolorum deleniti cupiditate beatae sunt labore provident nisi voluptatem? Fugit recusandae quaerat!</p>
                <p>Asperiores odit sequi sunt repudiandae perferendis cupiditate illum ratione placeat quisquam non voluptates officiis ad...

CSS

html, body {
    padding: 0;
    margin: 0;
    height: 100%;
}
.content {
    overflow: hidden;
    height: 100%;
}
.left, .right {
    float: left;
    width: 50%;
    padding-bottom: 99in;
    margin-bottom: -99in;
}
.left {
    background-color: #ff0;
}
.top {
    height: 1em;
}
.right {
    height: 100%;
}
.bottom {
    height: 100%;
    overflow: hidden;
}
.wrap {
    overflow: auto;
    height: calc(100% - 1em);
}

JavaScript

var speed = 1000;
var wrap = $('.wrap');
var direction = true;
var animateFn = function (elm, speed, to) {
    to = (direction ? elm.prop('scrollHeight') - elm.prop('clientHeight') : 0);

    elm.stop().animate({
        scrollTop: to
    }, speed, 'linear', function () {
        direction = !direction;
        animateFn(wrap, speed, direction);
    });
};

animateFn(wrap, speed, direction);