JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div id="elem-1">
  <ul>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil consectetur earum laudantium rem excepturi nemo iste sed harum eligendi dignissimos reprehenderit est voluptatibus, esse cum error aliquid, labore hic? Illo!</li>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil consectetur earum laudantium rem excepturi nemo iste sed harum eligendi dignissimos reprehenderit est voluptatibus, esse cum error aliquid, labore hic? Illo!</li>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil consectetur earum laudantium rem excepturi nemo iste sed harum eligendi dignissimos reprehenderit est voluptatibus, esse cum error aliquid, labore hic? Illo!</li>
    <li id="elem-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil consectetur earum laudantium rem excepturi nemo iste sed harum eligendi dignissimos reprehenderit est voluptatibus, esse cum error aliquid, labore hic? Illo!</li>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil consectetur earum laudantium rem excepturi nemo iste sed harum eligendi dignissimos reprehenderit est voluptatibus, esse cum error aliquid, labore hic? Illo!</li>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil consectetur earum laudantium rem excepturi nemo iste sed harum eligendi dignissimos reprehenderit est voluptatibus, esse cum error aliquid, labore hic? Illo!</li>
  </ul>
</div>
<button id="scroll">scroll</button>

CSS

div {
    height: 100px;
    overflow: auto;
    margin-top: 200px;
}

JavaScript

var a = document.querySelector('#elem-1');
var b = document.querySelector('#elem-2');
var c = document.querySelector('#scroll');

c.addEventListener('click',function(){
	var num = 0;
	var result = b.getBoundingClientRect().top - a.getBoundingClientRect().top 
    function scroll(){
    	num += 10;
        if(num > result){
        	return
        }
    	a.scrollTop = num;
    	requestAnimationFrame(scroll)
    }
    scroll();
})