JSFiddle - React, Tailwind, and code Playground

by webvitaly

HTML

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="btn-toolbar">
    <button class="btn btn-primary scroll-down"><i class="icon-arrow-down"></i> scroll-down</button>
    <button class="btn btn-primary scroll-up"><i class="icon-arrow-up"></i> scroll-up</button>
    <button class="btn btn-primary scroll-right"><i class="icon-arrow-right"></i> scroll-right</button>
    <button class="btn btn-primary scroll-left"><i class="icon-arrow-left"></i> scroll-left</button>
    <button class="btn btn-primary hover-scroll-down"><i class="icon-arrow-down"></i><i class="icon-arrow-down"></i> hover scroll-down</button>
</div>
<div class="log">scroll position: top=<span class="top">0</span> left=<span class="left">0</span></div>
<div class="scroll-parent well">
    <div class="scroll-child well">
        <img src="https://via.placeholder.com/200x80" />
The quick brown fox jumps over the lazy dog.
Brick quiz whangs jumpy veldt fox!
Quick wafting zephyrs vex bold Jim.
Sphinx of black quartz judge my vow!
The five boxing wizards jump quickly.
Mr. Jock, TV quiz Ph.D., bags few lynx.
Pack my box with five dozen liquor jugs.
Jackdaws love my sphinx of black quartz.
Sympathizing would fix Quaker objectives.
Five big quacking zephyrs jolt my wax bed.
The quick brown fox jumps over the lazy dog.
Many-wived Jack laughs at probes of sex quiz.
Mix Zapf with Veljovic and get quirky Beziers.
Dumpy kibitzer jingles as exchequer overflows.
Puzzled women bequeath jerks very exotic gifts.
Brawny gods just flocked up to quiz and vex him.
Viewing quizzical abstracts mixed up hefty jocks.
Playing jazz vibe chords quickly excites my wife.
Jim just quit and packed extra bags for Liz Owen.
Five wine experts jokingly quizzed sample chablis.
William Jex quickly caught five dozen Republicans.
A large fawn jumped quickly over white zinc boxes.
Cozy lummox gives smart squid who...

CSS

.scroll-parent {
    overflow: auto;
    width: 200px;
    height: 200px;
}

.scroll-child {
    width: 800px;
}

JavaScript

$(function(){
    $('.scroll-down').click(function() { // bind an event handler to the click event
        //$('.scroll-parent').scrollTop( $('.scroll-parent').scrollTop() + 100 ); // fast scroll
        $('.scroll-parent').animate({ // smooth scroll
            scrollTop: $('.scroll-parent').scrollTop() + 100
        })
        $('.log .top').text( $('.scroll-parent').scrollTop() );
    });
    
    $('.scroll-up').click(function() { // bind an event handler to the click event
        //$('.scroll-parent').scrollTop( $('.scroll-parent').scrollTop() - 100 ); // fast scroll
        $('.scroll-parent').animate({ // smooth scroll
            scrollTop: $('.scroll-parent').scrollTop() - 100
        })
        $('.log .top').text( $('.scroll-parent').scrollTop() );
    });
    
    $('.scroll-right').click(function() { // bind an event handler to the click event
        //$('.scroll-parent').scrollLeft( $('.scroll-parent').scrollLeft() + 100 ); // fast scroll
        $('.scroll-parent').animate({ // smooth scroll
            scrollLeft: $('.scroll-parent').scrollLeft() + 100
        })
        $('.log .left').text( $('.scroll-parent').scrollLeft() );
    });
    
    $('.scroll-left').click(function() { // bind an event handler to the click event
        //$('.scroll-parent').scrollLeft( $('.scroll-parent').scrollLeft() - 100 ); // fast scroll
        $('.scroll-parent').animate({ // smooth scroll
            scrollLeft: $('.scroll-parent').scrollLeft() - 100
        })
        $('.log .left').text( $('.scroll-parent').scrollLeft() );
    });
    setInterval(function(){
        if($('.hover-scroll-down').is(':hover')) {
            $('.scroll-parent').animate({ // smooth scroll
                scrollTop: $('.scroll-parent').scrollTop() + 100
            })
            $('.log .top').text( $('.scroll-parent').scrollTop() );
        }
    }, 600);
});