jquery - body の scrollLeft を読み取ったり設定したりできません

Question

ここに jsfiddle があります - http://jsfiddle.net/stevea/4sBep/2/ - ドラッグ可能なベージュのボックスがあります。ボックスを右クリックすると、右側に赤いボックスが作成されます。ベージュのボックスが右端に近すぎて赤いボックス全体が見えない場合は、body 要素のスクロール バーが表示されます。

問題は、赤いボックス (下から 3 行目) を作成した後、body の scrollLeft 値を読み取って、赤いボックスがどれだけ表示されていないかを確認できず、body を設定できないことです。値をスクロールして、赤いボックス (最後の行) をさらに表示します。

誰かが問題を見ていますか？ありがとう

 $('#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);

     });