I have a little thumbnail that represents all the window. You can move the div #maquetaPant and the window should to scroll at the same time you move the little square.

You can try this jsfiddle:

http://jsfiddle.net/oscardr/H2tEN/

Move the little square to scroll the window. If you try to change the drag event for a stop event then it works well.

The code is here. If I put the function "dragMaqueta" in the stop event, then it works well. But I want it in the drag event to scroll the window at the same time of dragging the square. But if you try you'll see that doesn't work. It seems that window.scrollTo(scrollX,scrollY) moves the #maquetaPant outside the container.

2. <div id="canvasDiv">       
3.  <canvas id="canvas" width="125" height="100"></canvas>
4.         <div id="maquetaPant"></div>
5.     </div>
6. 
   
7. #maquetaPant
8. {
9.     position: absolute;
10. }
11. 
    
12. $("#maquetaPant").draggable({containment: '#canvasDiv',drag: dragMaqueta});
13. 
    
14. function dragMaqueta(evt,ui)
15. {
16.    var scrollX =  parseInt(ui.position.left / $('#canvasDiv').width() * $('.Postits').width());
17.    var scrollY =  parseInt(ui.position.top / $('#canvasDiv').height() * $('.Postits').height());
18.     window.scrollTo(scrollX,scrollY);
19. }

Do you know how to solve it?

Thank you!