JSFiddle - React, Tailwind, and code Playground

by Willibrord Koch

HTML

<div id="div1">
     <h3>Please drag an item and scroll via hovering the scroll-areas at the top or bottom or using the mousewheel</h3>

    <div id="topscroller">Hover Scroll-up area</div>
    <div id="div2">
        <ul id="liste">
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
            <li>Item 5</li>
            <li>Item 6</li>
            <li>Item 7</li>
            <li>Item 8</li>
            <li>Item 9</li>
        </ul>
    </div>
    <div id="downscroller">Hover Scroll-down area
        <div></div>

CSS

#div1 {
    height:500px;
    background-color:green;
    position:relative;
}
#div2 {
    position:absolute;
    top:70px;
    left:50px;
    height:100px;
    width:300px;
    overflow-y:auto;
    overflow-x:hidden;
    background-color:lightgrey;
}
#liste {
    margin:0;
}
#topscroller {
    position:absolute;
    top:50px;
    left:50px;
    height:20px;
    width:300px;
    background-color:grey;
}
#downscroller {
    position:absolute;
    top:170px;
    left:50px;
    height:20px;
    width:300px;
    background-color:grey;
}

JavaScript

$("#liste>li").draggable({
    helper: function (event, ui) {
        return $('<span style="white-space:nowrap;"/>').css({
            background: 'transparent'
        }).html('<span>...the helper</span>');
    },
    scroll: false,
    cursorAt: {
        right: 100,
        top: 0
    },
    cursor: 'no-drop'
});
$("#topscroller").hover(function () {
    $("#div2").animate({
        scrollTop: 0
    }, 500);
}, function () {
    $("#div2").stop();
});

$("#downscroller").hover(function () {
    $("#div2").animate({
        scrollTop: $("#div2").offset().top + 100
    }, 500);
}, function () {
    $("#div2").stop();
});