JSFiddle - React, Tailwind, and code Playground

by Brenton Strine

HTML

<div id="targetElement">
click text box below 
    <div id="vert"></div>
    <div id="hort"></div>
</div>

<div id="thingy">
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Proin vitae risus neque, vitae adipiscing sapien.</li>
<li>Vivamus vitae leo vitae arcu pretium mattis.</li>
<li>Ut sit amet nisl a odio suscipit dapibus sed at ipsum.</li>
<li>Pellentesque adipiscing auctor augue, eget accumsan dolor imperdiet sit amet.</li>
<li>Vivamus id erat non tortor porttitor placerat at a nunc.</li>
<li>Nullam lacinia est sed elit ornare ut ullamcorper massa viverra.</li>
<li>Nam mattis pharetra dolor, a rutrum dui rutrum at.</li>
<li>Pellentesque dignissim nisi non nibh accumsan a semper ligula mattis.</li>
<li>Morbi viverra mollis elit, nec cursus tortor fermentum quis.</li>
<li>Nulla sollicitudin nibh quis nibh sodales gravida.</li>
<li>Nunc porta sapien consectetur nunc sollicitudin congue.</li>
<li>In eleifend libero quis tortor lacinia luctus.</li>
<li>In placerat ipsum eget augue luctus at blandit lacus rhoncus.</li>
<li>Pellentesque posuere pulvinar massa, sed bibendum eros consectetur nec.</li>
<li>Fusce accumsan auctor sem, id semper metus lacinia in.</li>
<li>Sed quis diam velit, sit amet ullamcorper sapien.</li>
<li>Donec quis sem est, in porta dui.</li>
<li>Sed lacinia luctus velit, nec eleifend sem molestie aliquam.</li>
<li>In mattis posuere augue, sit amet pretium est egestas a.</li>
<li>Sed vehicula euismod risus, et iaculis ligula commodo ut.</li>
<li>Nullam gravida venenatis purus, id iaculis neque porttitor sit amet.</li>
<li>Vestibulum aliquam eros at urna elementum aliquam.</li>
<li>Praesent rhoncus porttitor nunc, nec rhoncus velit lacinia sed.</li>
<li>Donec feugiat lectus in leo pulvinar rhoncus.</li>
<li>Maecenas sit amet risus eu ipsum interdum tincidunt.</li>
<li>Ut volutpat risus a turpis malesuada in iaculis nisl fringilla.</li>
<li>Suspendisse sed massa ut ante malesuada tincidunt.</li>
<li>Mauris non tellus...

CSS

#thingy {  
width: 80px;
height: 80px;
overflow-y: auto;
overflow-x: hidden;
}

#targetElement, #targetElement2 {
 border: dashed red 2px;   
    height: 200px; width: 200px;
}
#targetElement2 {
margin-top:50px;    
}
#vert{width:1px;background:red;height:30px;position:absolute;top:200px;left:0;}
#hort{width:30px;background:red;height:1px;position:absolute;top:0;left:0;}

JavaScript

$(function() {
    
    $("#thingy").click(function(){
        $(this).setEdges({
            bottom: { to: window, offset:0},
            right: { to: 50, param2 : 175}
        }
        );                
    });
    
    $.fn.setEdges= function(e){
        var elemTop = this.offset().top;
        var elemLeft = this.offset().left;
        var elemRight = this.width() + elemLeft;
        var elemBottom = this.height() + elemTop;
        var t = e.top || false;
            t.offset = t.offset || 0;
        var r = e.right || false;
            r.offset = r.offset || 0;
        var b = e.bottom || false;
            b.offset = b.offset || 0;
        var l = e.left || false;
            l.offset = l.offset || 0;
        
        
        if(b){
            var targetBottom = ((b.to==window) ? $(b.to).height() : $(b.to).offset().top) + b.offset;
            var elemHeight = targetBottom - elemTop;
            var travel = -1*(targetBottom - elemBottom);
            this.height(elemHeight);
            this.css("margin-bottom",travel);
        }
        
    };

});