JSFiddle - React, Tailwind, and code Playground

by hmpeda

HTML

<div class="container">
  <div class="content">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">10</div>
    <div class="item">11</div>
  </div>
</div>

<a href="javascript:up()">up</a>
<a href="javascript:down()">down</a>

<p>
  Active Element: <span class="active-item">1</span>
</p>

CSS

.container {
  width: 200px;
  overflow: hidden;
  scroll-behavior: smooth;
}

.content {
  width: auto;
  display: grid;
  grid-template-columns: 200px;
  grid-template-rows: repeat(11, 200px);
  height: 200px;
}
.item {
  height: 200px;
  font-size: 100px;
  text-align: center;
  background: red;
}

JavaScript

var active = 0;

function up() {
	let elem = document.querySelector('.container');
  active = Math.max(0, active - 1);
  elem.scrollTo({ top: active * 200 });
  document.querySelector('.active-item').innerHTML = (active + 1);
}

function down() {
	let elem = document.querySelector('.container');
  active = Math.min(10, active + 1);
  elem.scrollTo({ top: active * 200 });
  document.querySelector('.active-item').innerHTML = (active + 1);
}