JSFiddle - React, Tailwind, and code Playground

HTML

<div id="scrollable">
  <div class="item" id="item1">
    1
  </div>
  <div class="item" id="item2">
    2
  </div>
  <div class="item" id="item3">
    3
  </div>
  <div class="item" id="item4">
    4
  </div>
  <div class="item" id="item5">
    5
  </div>
</div>

CSS

#scrollable {
  height: 40px;
  border: 2px solid black;
  overflow-y: scroll;
}

.item {
  height: 30px;
  border: 1px solid black;
  background-color: green;
}

JavaScript

function scrollWithin(wrapperElementId, innerElementId) {
	// get the inner element
	var innerElement = document.getElementById(innerElementId);
  // calculate the offset top to to wrapper element plus the element height
  var topPos = innerElement.offsetTop + (innerElement.offsetHeight / 2);
  // zoom the wrapper element to the inner element
  document.getElementById(wrapperElementId).scrollTop = topPos;
}

scrollWithin('scrollable', 'item3');