JSFiddle - React, Tailwind, and code Playground

by HYEONGJINKIM

HTML

<div id="yellow">jhj sdljflkdsajfkjdsklfjdlskajfkfklsdfklajsdfkljdsaggggggggggggggggggggggggggggggggggggggggggggggggkljflkdsajflkjdasjfsjdfkldsaj dsj klfjdsalkfjsdkjl flkasdjflkjsadklfjadskl jfklsadjfkl jsda kljfladks jfl kjdsalkfj alsdkjf kldsajf lkdsjaklfjdsakljflkdsaj flkjasdlkfjklasdjf klsadj sdljflkdsajfkjdsklfjdlskajfkfklsdfklajsdfkljdsakljflkdsajflkjdasjfsjdfkldsaj dsj klfjdsalkfjsdkjl flkasdjflkjsadklfjadskl jfklsadjfkl jsda kljfladks jfl kjdsalkfj alsdkjf kldsajf lkdsjaklfjdsakljflkdsaj flkjasdlkfjklasdjf klsadj sdljflkdsajfkjdsklfjdlskajfkfklsdfklajsdfkljdsakljflkdsajflkjdasjfsjdfkldsaj dsj klfjdsalkfjsdkjl flkasdjflkjsadklfjadskl jfklsadjfkl jsda kljfladks jfl kjdsalkfj alsdkjf kldsajf lkdsjaklfjdsakljflkdsaj flkjasdlkfjklasdjf klsadj sdljflkdsajfkjdsklfjdlskajfkfklsdfklajsdfkljdsakljflkdsajflkjdasjfsjdfkldsaj dsj klfjdsalkfjsdkjl flkasdjflkjsadklfjadskl jfklsadjfkl jsda kljfladks jfl kjdsalkfj alsdkjf kldsajf lkdsjaklfjdsakljflkdsaj flkjasdlkfjklasdjf klsadj sdljflkdsajfkjdsklfjdlskajfkfklsdfklajsdfkljdsakljflkdsajflkjdasjfsjdfkldsaj dsj klfjdsalkfjsdkjl flkasdjflkjsadklfjadskl jfklsadjfkl jsda kljfladks jfl kjdsalkfj alsdkjf kldsajf lkdsjaklfjdsakljflkdsaj flkjasdlkfjklasdjf klsadj sdljflkdsajfkjdsklfjdlskajfkfklsdfklajsdfkljdsakljflkdsajflkjdasjfsjdfkldsaj dsj klfjdsalkfjsdkjl flkasdjflkjsadklfjadskl jfklsadjfkl jsda kljfladks jfl kjdsalkfj alsdkjf kldsajf lkdsjaklfjdsakljflkdsaj flkjasdlkfjklasdjf klsadj sdljflkdsajfkjdsklfjdlskajfkfklsdfklajsdfkljdsakljflkdsajflkjdasjfsjdfkldsaj dsj klfjdsalkfjsdkjl flkasdjflkjsadklfjadskl jfklsadjfkl jsda kljfladks jfl kjdsalkfj alsdkjf kldsajf lkdsjaklfjdsakljflkdsaj flkjasdlkfjklasdjf klsadj fkljsadklfjlksadj</div>
<div id="red"></div>

CSS

#yellow {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 500px; 
    height: 250px; 
    background-color: Yellow; 
    border: 2px solid Blue;
    overflow:auto;
}

#red {
    position: absolute;
    width: 100px; 
    height: 100px; 
    background-color: red; 
    border: 2px solid pink; 
    z-index: 100; 
}

JavaScript

var yellow = $('#yellow');
var offset = yellow.offset();
var offsetWidth = offset.left + yellow.width();
var offsetHeight = offset.top + yellow.height();

var red = $('#red');

var intRightHandler = null;
var intLeftHandler = null;
var intTopHandler= null;
var intBottomHandler= null;
var distance = 70;
var timer = 100;
var step = 10;


function clearInetervals()
{
    clearInterval(intRightHandler);
    clearInterval(intLeftHandler);
    clearInterval(intTopHandler);
    clearInterval(intBottomHandler);    
}

red.draggable({
    start : function(){},
    stop: function(){clearInetervals(); },    
    drag : function(e){
        var isMoving = false;        
        //Left
        if((e.pageX - offset.left) <= distance)
        {
            isMoving = true;
            clearInetervals();            
            intLeftHandler= setInterval(function(){
                yellow.scrollLeft(yellow.scrollLeft() - step)
            },timer);
            console.log('left')
        }
    
        //Right
        if(e.pageX >= (offsetWidth - distance))
        {
            isMoving = true;
            clearInetervals();            
            intRightHandler = setInterval(function(){
                yellow.scrollLeft(yellow.scrollLeft() + step)
            },timer);
            console.log('right')
        }
        
        //Top
        if((e.pageY - offset.top) <= distance)
        {
            isMoving = true;
            clearInetervals();            
            intTopHandler= setInterval(function(){
                yellow.scrollTop(yellow.scrollTop() - step)
            },timer);
            console.log('top')
        }                          
        
        //Bottom
        if(e.pageY >= (offsetHeight - distance))
        {
            isMoving = true;
            clearInetervals();            
            intBottomHandler= setInterval(function(){
                yellow.scrollTop(yellow.scrollTop() + step)
            },timer);
           ...