JSFiddle - React, Tailwind, and code Playground

by bizamajig

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div class="a">
  <div class="b">
    <div>a</div>
    <div>b</div>
   <div>c</div>
    <div>d</div>
   <div>e</div>
   <div>f</div>
    <div>g</div>
    <div>h</div>
   <div>i</div>
   <div>j</div>
    <div>k</div>
   <div>l</div>
    <div>m</div>
    <div>n</div>
    <div>a</div>
    <div>b</div>
   <div>c</div>
    <div>d</div>
   <div>e</div>
   <div>f</div>
    <div>g</div>
    <div>h</div>
   <div>i</div>
   <div>j</div>
    <div>k</div>
   <div>l</div>
    <div>m</div>
    <div>n</div>
  </div>
</div>

CSS

.b {
  border: 1px solid;
  width: 100px;
  height: 100px;
  overflow-y: scroll;
  overflow-x: hidden;
}

JavaScript

$(function(){
	var scrollTop = 0;
	$('.b').sortable({
  	start: function(event, ui){
      scrollTop = ui.item.scrollTop();
    },
    stop: function(event, ui){
      ui.item.scrollTop(scrollTop);
    }
  });
});