Unable to read scrollLeft for body

Unable to read scrollLeft for body

I have a jsfiddle here - http://jsfiddle.net/stevea/4sBep/2/ - that has a
draggable beige box. When you right-click the box a red box is created to
the right of it. If the beige box is too close to the right edge, so that
the complete red box is not visible, a scroll bar appears for the body
element.
The problem is I'm not able to read the scrollLeft value for body after
creating the red box (third line from the bottom) to see the how much of
the red box is not showing, and I'm not able to set the body scroll value
to show more of the red box (last line).
Does anyone see the problem? Thanks
$('#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;
$('<div>').css({width:"150px",
height:"150px",
'background-color':'red',
position : 'absolute'
})
.offset(doc_offset)
.appendTo('body');
var scroll_left = $('body').scrollLeft();
$('#scrollStatus').html("Scroll left is " + scroll_left);
$('body').scrollLeft(150);
});