视口始终遵循div

Question

我有一个小小的web项目，您可以使用箭头键移动div。我使用jQuery：

HTML

<div id="machine" style="width: 100px; height: 100px; background-color: darkgrey; position: absolute;">
</div>

的javascript

var pressed = false;

$(document).keydown(function(e) {
    if (!pressed) {
        width = $(this).width();
        height = $(this).height();
        switch (e.which) {
            case 37:
                $('#machine').stop().animate({
                    left: '-=' + width
                }, 2000); //left arrow key
                break;
            case 39:
                $('#machine').stop().animate({
                    left: '+=' + width
                }, 2000); //right arrow key
                break;
        }
    }
    pressed = true;

}).keyup(function() {
    $('#machine').stop();
    pressed = false;
});

现在我希望视口始终遵循此div #machine。

因此，当此div移出右侧的视口时，视口会向右滚动。但是停止，如果div停止。

感谢您的帮助。 ：）