JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main">
  <div id="wrapper" class="sidebar">
    <div id="sidebar">
      <div class="element" data-slide-id="0">a
      </div>
      <div class="element" data-slide-id="1">b
      </div>
      <div class="element" data-slide-id="2">c
      </div>
      <div class="element" data-slide-id="3">d
      </div>
      <div class="element" data-slide-id="4">e
      </div>
      <div class="element" data-slide-id="5">f
      </div>
      <div class="element" data-slide-id="6">g
      </div>
      <div class="element active" data-slide-id="7">h
      </div>
        <div class="element" data-slide-id="6">g
      </div>
        <div class="element" data-slide-id="6">g
      </div>
        <div class="element" data-slide-id="6">g
      </div>
        <div class="element" data-slide-id="6">g
      </div>
    </div>
  </div>
</div>

<div id="foo">Clicky</div>

CSS

#main, #sidebar {
      height: 200px;
    }

    #wrapper{
      width: 190px;
      float: left;
      background: grey;
      overflow: auto;
      ppoverflow-x: hidden;
    }

    #sidebar div.element  {
      height: 150px;
      width: 150px;
      background-color: green;
      margin-bottom: 10px;
    }

    #sidebar div.element.active {
      background-color: red;
    }

JavaScript

$( document ).ready(function() {
    $("#foo").click(function() {
        $("#wrapper").scrollTop($("#wrapper").scrollTop()+$("div.element.active").position().top);    
    })
});