jquery-ui: dragging element outside viewport

Question

I have a situation in which I have a menu hidden outside the viewport.

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#menu {
    position: absolute;
    width: 100px;
    height: 100%;
    top: 0;
    right: -100px;
}

I also have a draggable element. Now, when I drag the draggable to the right and try to move it outside the viewport (also on the right side), I can make the menu visible by somehow moving the viewport to the left. Checkout the jsfiddle How can I disable this behaviour ?

Answer 1

You can use the Scroll option to prevent the page from scrolling.

$( "#draggable" ).draggable({scroll: false });

DEMO

It can be used together with containment: "parent" to prevent the box sticking out of its parent.

What seem to be happening with your code is that the page is scrolled when you reach the corner and then never scrolled back as you have overflow: hidden set for body.

The downside with using scroll: false is that you won't be able to drag the element down the page either.

Documentation: http://api.jqueryui.com/draggable/#option-scroll