JSFiddle - React, Tailwind, and code Playground

by Ryan Mitchell

HTML

<h1>Scrolling</h1>
<p>We will scroll the below.</p>
<button id="up">Up</button><button id="down">Down</button>

<div class ="project-wrap">
   <div class="project-detail" id="project-detail1">
       <h2>One</h2>
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec varius augue, viverra luctus metus. Proin varius odio in mauris pharetra consequat. In eget ornare erat. Praesent porta diam vitae nunc placerat dignissim et at leo. Ut mattis mollis purus eget mattis. Sed luctus, orci ac varius pulvinar, mauris libero dapibus sapien, eget tempor urna risus non mi. Curabitur mollis nulla eu elit gravida porttitor in quis nunc. Vivamus a nunc pretium, venenatis urna sit amet, molestie tortor. Pellentesque consequat ullamcorper mi, a malesuada magna adipiscing eget. Sed bibendum dapibus nunc, nec consectetur lectus rutrum ut. Vestibulum dapibus tristique lorem, sit amet luctus nulla dapibus eu.</p>
   </div>
   <div class="project-detail" id="project-detail2">
       <h2>Two</h2>
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec varius augue, viverra luctus metus. Proin varius odio in mauris pharetra consequat. In eget ornare erat. Praesent porta diam vitae nunc placerat dignissim et at leo. Ut mattis mollis purus eget mattis. Sed luctus, orci ac varius pulvinar, mauris libero dapibus sapien, eget tempor urna risus non mi. Curabitur mollis nulla eu elit gravida porttitor in quis nunc. Vivamus a nunc pretium, venenatis urna sit amet, molestie tortor. Pellentesque consequat ullamcorper mi, a malesuada magna adipiscing eget. Sed bibendum dapibus nunc, nec consectetur lectus rutrum ut. Vestibulum dapibus tristique lorem, sit amet luctus nulla dapibus eu.</p>
   </div>
   <div class="project-detail" id="project-detail3">
       <h2>Three</h2>
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec varius augue, viverra luctus metus. Proin varius odio in mauris pharetra consequat. In eget ornare erat....

CSS

.project-wrap {
    height: 40vh;
    overflow: scroll;
}

JavaScript

// store offsetTops of project-details inside a dict
// you would want to update this on resize, orientation change, etc., as well as content change


$(".project-wrap").scroll(function(e) {
    setTimeout(function() {
        alert($(e.target).scrollTop());
        alert($(this).scrollTop());
    }, 20);
});