JSFiddle - React, Tailwind, and code Playground

by bizamajig

HTML

<div class="container">
    <ul class="sortable">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

CSS

.container { overflow:hidden;}
.sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
.sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
.sortable li span { margin-left: -1.3em; }
.sortable {
  height:300px;
  background:red;
  overflow: auto;
}

JavaScript

/*
$(".sortable").sortable({
    scroll: true,
    scrollSensitivity: 100,
    scrollSpeed: 3,
    sort: function(event, ui) {
        var currentScrollTop = $(window).scrollTop(),
            topHelper = ui.position.top,
            delta = topHelper - currentScrollTop;
        setTimeout(function() {
console.log( 'SCROLL currentScrollTop =', currentScrollTop, delta);
//					$(window).scrollTop(currentScrollTop + delta);
					$(".sortable").scrollTop(currentScrollTop + delta);
        }, 20);
    }
});
   var scroll = '';
   var $scrollable = $(".sortable");
   function scrolling(){
     if (scroll == 'up') {
       $scrollable.scrollTop($scrollable.scrollTop()-20);
console.log( 'SCROLL UP', $scrollable.scrollTop()-20 );
setTimeout(scrolling,50);
     }
     else if (scroll == 'down'){
       $scrollable.scrollTop($scrollable.scrollTop()+20);
console.log( 'SCROLL DOWN', $scrollable.scrollTop()+20 );
       setTimeout(scrolling,50);
     }
   }
*/
   $( ".sortable" ).sortable({
      scroll: false,
      out: function( event, ui ) {
        if (!ui.helper) return;
console.log( ui.offset.top, window.scrollY );
        if (ui.offset.top>0) {
          scroll='down';
        } else {
          scroll='up';
        }
        scrolling();
      },
      over: function( event, ui ) {
        scroll='';
      },
      deactivate:function( event, ui ) {
        scroll='';
      }
    });
    $( ".sortable").disableSelection(); 
var text = "Lorem ipsum dolor sit ame.";
$(".sortable li").each(function(i) {
    $(this).text((i+1) + ") " + text);
});

//$(window).scrollTop(400);