Prevent scrolling for a certain element?

Question

I'm using jQuery draggable() on a certain DIV-element, so I can move it around freely.

The DIV is quit big, so scrollbars appear when a part of the DIV is outside of the visible area, but for this element this I would like to see no scrollbars appearing.

But I do want scrollbars to appear when other elements are outside the visible area (for example if the page is longer than the screen).

So my question is, is it possible to exclude a certain element from affecting the scrollbars ?

(I'm not asking to use overflow to hide the scrollbars, I only don't want a certain DIV to affect them)

Any idea?

Answer 1

Your draggable DIV can be wrapped into another div that won't allow scrollbars to be created.

<style>
.wrapper {
    height: 100%;
    position: absolute;
    width: 100%;
    overflow: hidden;
    top: 0;
    left: 0;
}

.draggable {
    position: absolute;
    top: 1000px; /* simulating going over the edge of the page */
    left: 800px; /* simulating going over the edge of the page */
    width: 500px;
    height: 500px;
    background: #F00;
}
</style>    


<div class="wrapper">
    <div class="draggable">
        Hello - No scrollbars created for me. :)
    </div>
</div>