Left Horizontal scroll when <div> is creating at run time in left hand sides

Question

I am making one tree structure with help of jsplumb API . When parent I am dropping a item in a , then two more divs are creating at run time by jquery according to position of parent div.

   <div id="win" style="overflow: scroll">
        <div id="rootNode">Drag New item Here</div>
    </div>

after dragging a item two divs are creating

    //getting postion of parent node
        var left= parseInt((document.getElementById("node").style.left).replace("px",""));
        var top= parseInt((document.getElementById("node").style.top).replace("px",""));
    var idValue = //clicked node id which contains "node"
    Left child:     
    $("#win").append("<div id='"+idValue+"1' class='window droppable' style='left:"+(left-150)+"px; top:"+(top+80)+"px'>Drag New item Here</div>");

    Right Child:
    $("#win").append("<div id='"+idValue+"2' class='window droppable' style='left:"+(left+150)+"px; top:"+(top+80)+"px'>Drag New item Here</div>");

all divs are creating inside of #win div

problem: After dropped item two childrens are creating. if right child is crossing width of #win div, then srcoll is appearing. But if left child is crossing width of #win div(on left side as it is creating left side of current node), then horizontal scroll is not working for left child div. left node is creating somewhere with css.left of - value. that's why it is not visible even by using scrollbar I cant find left child node as scrollbar start from 0 not from -value.

Answer 1

I sovled my problem by shifting all elements to right if left-150<0 like below

    var left= parseInt((document.getElementById(idValue).style.left).replace("px",""));
    //left is clicked element's left css value

    if((left-150)<0){
            var leftShift=0-(left-150);
            $('[id^='+"node" + ']').css("left","+="+leftShift);
            //showTree();
    }

added 150 in css property left of all existing and newly created node.