JSFiddle - React, Tailwind, and code Playground

by bakhshi

HTML

<div class="container">
    <button class="scrollable">click</button>
    <button class="scrollable">click</button>
    <button class="scrollable">click</button>
    <button class="scrollable">click</button>
    <button class="scrollable">click</button>
    <button class="scrollable">click</button>
    <button class="scrollable">click</button>
    <button class="scrollable">click</button>
    <button class="scrollable">click</button>
    <button class="scrollable">click</button>
    <button class="scrollable">click</button>
    <button class="scrollable">click</button>
    <button class="scrollable">click</button>
    <button class="scrollable">click</button>
</div>
<button class='scroll'>scroll</button>

CSS

.container{
    width:100px;
    height:200px;
    overflow:auto;
}

button{
    display:block;
}
.scroll{
    
}

JavaScript

$(function(){
    $('.scroll').click(function(){
        $('.scrollable').last()[0].scrollIntoView();
    });
    $(window).on('scroll', function(e){
        e.preventDefault();
        e.stopPropagation();
        return false;
    });
})