JSFiddle - React, Tailwind, and code Playground

by stevea

HTML

<div id="box"></div>
<div id="scrollStatus_before" class="scrollStatus"></div>
<div id="scrollStatus_after" class="scrollStatus"></div>

CSS

#box{
    width:150px;
    height:150px;
    background-color:beige;
    border:1px solid black;
    cursor: pointer;
}
div.scrollStatus {
    width:150px;
    height:20px;
    border:1px solid black;
    margin-top:20px;
}

JavaScript

$(function() {

    $('#box').draggable();
    $('#box').contextmenu(function(e) {
        e.preventDefault();
        var doc_offset;
        boxWidth = $('#box').width();
    
        doc_offset = $(this).offset();
        doc_offset.left = doc_offset.left +  boxWidth + 20;  // where we'll start red box
        $('<div>').css({width:"150px", 
                        height:"150px",
                        'background-color':'red',
                        position : 'absolute'
                       })
                 .offset(doc_offset)
                  .appendTo('body');  

       debugger;
        var scroll_left = $('body').scrollLeft();
        $('#scrollStatus_before').html("Scroll left is " + scroll_left);
        $('body').scrollLeft(doc_offset.left);
        $('#scrollStatus_after').html("Scroll left is " + scroll_left);
        
	 });
});