Making the window draggable outside boundary

Question

ExtJS 4

I have a desktop layout structure for my ExtJS webpage. The page is not scrollable. We have icons to be clicked which opens different Ext.Windows.

The problem comes when I drag the window outside the browser boundary. The window is dragged perfectly but then the browser scroll bars come up to scroll the page so that I can view the whole window. I don't want to scroll the webpage in any case.

This is happening
~~~~~~~~~~~~~~~~~~~~~~~~
|~~~~~~~~~~~~~~~~      |
||              |<-----+--- desktop
||            -window- |
||           |  |    | |
||            --+----- |
||              |  <---|--- unwanted white space
|| <--taskbar-> |      |
|~~~~~~~~~~~~~~~~      |
|   <--scroll bar-->   |<---- webpage
~~~~~~~~~~~~~~~~~~~~~~~~


This is needed
~~~~~~~~~~~~~~~~~~
|~~~~~~~~~~~~~~~~|
||           <--++--- desktop
||            -window-
||           | A|| B |
||            --++----
||              ||
||  <-taskbar-> ||<--- webpage
|~~~~~~~~~~~~~~~~|
~~~~~~~~~~~~~~~~~~
A = window part to be shown
B = window part to be cropped

Its just that I want to fix my viewport no matter if the window is being dragged outside the boundary.

How to do that?

I hope its clear now.

Answer 1

I solved this. We can just remove scroll bars from the browsers.

document.documentElement.style.overflow = 'hidden';  // firefox, chrome
document.body.scroll = "no"; // ie only

In firefox, its working fine. But gives problem in IE-7. Check this