jquery - jquery page navigator with scroll and drag

Question

i create a page navigator with jquery. is a thumbnail of the page with a box of aspect ratio (1/10)

DEMO

I can drag the box #screen and animate the window scroll, and I can scroll the window and update the box position.

my problem is the use of both actions..when I drag the box.. the scroll go crazy! thanks

Answer 1

The scrolling also ocurs on the #screen frame because of it's absolute position. If you fix it, it will work better:

#screen {
    border:1px solid red;
    position:fixed;
    cursor:pointer;
}

Also the animation seems to be not such a good idear. If you change it to normal scrolling it nearly works.

$('html').scrollTop(currentPos.top).scrollLeft(currentPos.left);

The rest is fine-tuning and playing around with the margin.