JSFiddle - React, Tailwind, and code Playground

by Vitaliy

HTML

<div class='cont'>
    <div class='wrap'>
        <div class='inner-block'>scroll me</div>
        <div class='inner-block'>scroll me</div>
        <div class='inner-block'>scroll me</div>
        <div class='inner-block'>scroll me</div>
        <div class='inner-block'>scroll me</div>
        <div class='inner-block'>scroll me</div>
        <button style='display:none; position:fixed; right:10px; bottom:10px;' id = 'scroll'>scroll</button>
    </div>
</div>

CSS

html, body{
    margin:0;
    width:100%;
    height:100%;
}
.cont{
    width:100%;
    height:100%;
    overflow-x:scroll;
}
.wrap{
    height:100%;
    width:3000px;
    
    background:#1267fa;
    overflow-y:hidden;
}
.inner-block{
    width:80vw;
    margin:20vh 50px;
    height:60vh;
    background:#fa6712;
    display:inline-block;
    text-align:center;
}
.inner-block:nth-child(even){
    background:#12af12;
}

JavaScript

var btn = document.getElementById('scroll');
btn.onclick = function(){
    requestAnimationFrame(scroll)
}
var cont = document.querySelector('.cont')
cont.onscroll = function(){
    console.log('work');
    if(this.scrollLeft > 100)
        btn.style.display = 'block';
    else
        btn.style.display = 'none';
}
function scroll(){
    var step = 100;
    cont.scrollLeft-=step
    if(cont.scrollLeft > 0)
        requestAnimationFrame(scroll);
}
(function() {
  var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
                              window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
  window.requestAnimationFrame = requestAnimationFrame;
})();