JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/jquery-ui-git.css">
<script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>
<ul>
    <li>
        <img src="http://www.chrisnelsonphotography.com/jquery_ui/files/000craig_costume.jpg" />
    </li>
    <li>
        <img src="http://www.chrisnelsonphotography.com/jquery_ui/files/bengals1.jpg" />
    </li>
    <li>
        <img src="http://www.chrisnelsonphotography.com/jquery_ui/files/bengals2.jpg" />
    </li>
    <li>
        <img src="http://www.chrisnelsonphotography.com/jquery_ui/files/bengals3.jpg" />
    </li>
    <li>
        <img src="http://www.chrisnelsonphotography.com/jquery_ui/files/sam_as_pooh.jpg" />
    </li>
    <li>
        <img src="http://www.chrisnelsonphotography.com/jquery_ui/files/Samuel_arealsmile.jpg" />
    </li>
</ul>
<div>
    <h1>Steps to reproduce:</h1>
    <ol>
        <li><em>The list of images should scroll off the bottom of your browser window.</em> If
            for some reason it doesn't, shorten your browser window so it does. Also, <em>this text box should be shorter than the image list</em>.
            If it is larger, shrink your text size.</li>
        <li>Now, scroll the page to the bottom of the list. Try sorting the list by
            dragging one of the final few elements. Immediately upon starting the drag,
            you will see a screen jump.</li>
        <li>After dropping this element, without scrolling the page, try dragging
            it, or another element close by. You will see another jump.</li>
        <li>If you scroll the page up, so that the list's final element is not visible,
            and try dragging elements that *are* visible, the jump <em>does not</em> occur.</li>
</div>

CSS

body {
    background-color: #012840;
}
ul {
    list-style: none;
    width: 400px;
    color: #336633;
    background-color: #ffffff;
    padding: 15px;
    float: left;
}
div {
    width: 400px;
    background-color: #87A646;
    color: #000;
    padding: 20px;
    float: left;
}

JavaScript

$("ul").sortable();
var instance = $("ul").data("ui-sortable");
console.log(instance);

instance.__createHelper = instance._createHelper;
instance._createHelper = function(event) {
    this.scrollTop = this.element.scrollParent().scrollTop();
    console.log("_createHelper", this.element.scrollParent()[0], this.scrollTop);
    return this.__createHelper(event);
};

instance.__createPlaceholder = instance._createPlaceholder;
instance._createPlaceholder = function() {
    this.__createPlaceholder();
    console.log("_createPlaceholder", this.element.scrollParent()[0], this.scrollTop);
    this.element.scrollParent().scrollTop(this.scrollTop);
};