JSFiddle - React, Tailwind, and code Playground

by ponyspy

HTML

<span>areas:</span>
<button class="a_scroll back">back</button>
<button class="a_scroll next">next</button>

<span>blocks:</span>
<button class="b_scroll back">back</button>
<button class="b_scroll next">next</button>
<hr>
<div class="outer">
  <div class="inner">
  
    <div class="area">
      <div class="area_inner">
        
        <div class="lang ru">
          <div class="header">ru</div>
          <div class="blocks">
             <div class="block">1</div>
             <div class="block">2</div>
             <div class="block">3</div>
             <div class="block">4</div>           
          </div>
        </div>

        <div class="lang en">
          <div class="header">en</div>
          <div class="blocks">
             <div class="block">1</div>
             <div class="block">2</div>
             <div class="block">3</div>
             <div class="block">4</div>           
          </div>
        </div>           
        
      </div>   
    </div>
    <div class="area">2</div>
    <div class="area">3</div>
    
  </div>
</div>

CSS

.outer {
  width: 400px;
  height: 400px;
  background-color: grey;
  overflow-y: hidden;
	white-space: nowrap;
	vertical-align: top;  
}

.inner {
  display: inline-block;
  margin-right: -4px;
  height: 400px;
}

.area {
  width: 400px;
  height: 400px;
  display: inline-block;
  margin-right: -4px;
  background-color: green;
  overflow-y: hidden;
	white-space: nowrap;
	vertical-align: top;
}

.area_inner {
  display: inline-block;
  margin-right: -4px;
  height: 400px;
}

.lang {
  display: inline-block;
  margin-right: -4px;
  width: 400px;
}

.header {
  width: 400px;
  height: 100px;
  background-color: red;
}

.blocks {
  height: 300px;
  column-width: 400px;
  column-gap: 0px;
  overflow-y: hidden;
}

.block {
  -webkit-column-break-inside: avoid;  
  page-break-inside: avoid;
  break-inside: avoid;
  width: 400px;
  height: 100px;
  margin-bottom: 15px;
  background-color: maroon;
}

JavaScript

$('.a_scroll.next').on('click', function() {
	$('.area').eq(0).animate({
  	scrollLeft: '+=400'
  });
});

$('.a_scroll.back').on('click', function() {
	$('.area').eq(0).animate({
  	scrollLeft: '-=400'
  });
});




$('.b_scroll.next').on('click', function() {
	$('.ru').find('.blocks').animate({
  	scrollLeft: '+=400'
  });
});

$('.b_scroll.back').on('click', function() {
	$('.ru').find('.blocks').animate({
  	scrollLeft: '-=400'
  });
});