JSFiddle - React, Tailwind, and code Playground

by janeklb

HTML

<div id="container">
    <div id="scrollable">
        <ul>
            <li>Test</li>
            <li>Test</li>
            <li>Test</li>
            <li>Test</li>
            <li>Test</li>
            <li>Test</li>
            <li>Test</li>
            <li>Test</li>
            <li>Test</li>
            <li>Test</li>
            <li>Test</li>
            <li>Test</li>
            <li>Test</li>
            <li>Test</li>
            <li>Test</li>
            <li>Test</li>
            <li>Test</li>
            <li>Test</li>
            <li>Test</li>
            <li>Test</li>
            <li>Test</li>
            <li>Test</li>
            <li>Test</li>
            <li>Test</li>
            <li>Test</li>
            <li>Test</li>
            <li>Test</li>
            <li>Test</li>
            <li>Test</li>
            <li>Test</li>
        </ul>
    </div>
    <div id="autoscroll_up"></div>
    <div id="autoscroll_down"></div>
</div>

CSS

#container {
    position: relative;
    width: 400px;
    height: 400px;
}
#scrollable {
    width: 400px;
    height: 400px;
    overflow-y: auto;
}

#autoscroll_up {
    position: absolute;
    top: 0;
    width: 400px;
    height: 50px;
    background-color: rgba(85,40,140,0.2);
}

#autoscroll_down {
    position: absolute;
    bottom: 0;
    width: 400px;
    height: 50px;
    background-color: rgba(45,40,40,0.2);
}

JavaScript

var scrollIntervals = {},
    $scrollable = $('#scrollable'),
    speed = 100;

function clear_scroll_interval(elId) {
    clearInterval(scrollIntervals[elId]);
    scrollIntervals[elId] = null;
}

function create_scroll_hotspot(elId, offset) {
    $('#' + elId).on('mouseenter', function() {
        if (!scrollIntervals[elId]) {
            scrollIntervals[elId] = setInterval(function() {
                console.log($scrollable.scrollTop());
                $scrollable.animate({
                    "scrollTop": $scrollable.scrollTop() + offset
                }, speed, 'linear');
            }, speed);
        }
    }).on('mouseleave', function() {
        clear_scroll_interval(elId);
    });
}

create_scroll_hotspot('autoscroll_up', -50);
create_scroll_hotspot('autoscroll_down', 50);