JSFiddle - React, Tailwind, and code Playground

by Akash Saxena

HTML

<div id="overflow-scroll" class="mt-3">
  <div id="image-scroll">
  </div>
</div>

<div class="blocks">
  <p class="block1">One text</p>
  <p class="block2 hide">Two text</p>
  <p class="block3 hide">Three text</p>
</div>

CSS

#overflow-scroll, #overflow-scroll-offset {
    overflow: auto;
    height: 200px;
    background: none;
}
#image-scroll{
    width: 1000px;
    height: 100%;
    margin-left: 150px;
    background: pink;
    color: #fff;
}

.hide{
  display: none;
}

p{
  text-align: center;
}

JavaScript

$(document).ready(function(){
        $("#overflow-scroll").scroll(function(){
            var scrollRight = 200; //200 pixels
            if($("#overflow-scroll").scrollLeft() > scrollRight){
                //show block 2 and hide block1 text
                $(".block1").hide();
                $(".block2").show();
            }else{
            	$(".block1").show();
              $(".block2").hide();
            }
            
        })
    })