JSFiddle - React, Tailwind, and code Playground

by dipish

HTML

<div id="container">
    <div class="item" id="item-1">
        <p>Brain games will make you smarter! The internet is making you dumber! Alcohol is killing your brain cells!</p>
        <div style="width: 100px; height: 100px; border: solid 1px red; margin: 0 auto;"></div>
        <div class="scroll-enabler" style="top: 1000px;"></div>
    </div>
    <div class="item active" id="item-2">
        <p>We're a stubborn people who become set in our ways, so it's no wonder we want to believe that our inclination</p>
        <div style="width: 100px; height: 100px; border: solid 1px blue; margin: 0 auto;"></div>
    </div>
</div>

CSS

.scroll-enabler {position: absolute; width: 1px; height: 1px; overflow: hidden;}

#container {
    width: 600px;
    height: 200px;
    overflow: hidden;
    border: solid 2px gray;
    vertical-align: top;
}

    #container .item {
        width: 250px;
        height: 200px;
        margin-right: 20px;
        text-align: center;
        display: inline-block;
        vertical-align: top;
        overflow: hidden;
        position: relative;
    }
        #container .item p {
            margin-bottom: 15px;
        }

JavaScript

var firstItem = Ext.get('item-1');
firstItem.dom.scrollTop = 60;
firstItem.child('div').on('click', function() {
    firstItem.scrollTo('top', 0, {duration: 500});
});