How can I temporarily prevent a scrollable div from scrolling?

The simple answer is no you can't do this. Its doubly no if you want a cross-browser solution. Providing the user with the clear affordance that something can be scrolled then denying them that is just plain poor UI design.

Ok so after your edit it turns out you are not actually trying to prevent the user from scrolling. The main answer remains true though. It sounds as though the focus is going to rectangle (probably an anchor?) that is not fully in view and causes a scroll.

Is there a reason this rectangle must get the focus? For accessibility?

I have updated the question to better describe what I am trying to accomplish. I currently think the user interface is very usable and very well designed. But the fact that the menu's focus causes the underlying div to scroll is horrible and I need a way to work around it.

– Sebastian Celis Mar 20 '09 at 18:51 Yes, the menu is a list of anchor tags which needs to gain focus for accessibility concerns. Then menu is fully in view, but the act of moving the mouse near the edge of the scrollable div causes the browser to think it should scroll it for me. – Sebastian Celis Mar 20 '09 at 19:20.

I agree with Anthony regarding the presentation of the functionality you're trying to disallow. If you're going to disable scrolling, then you should make that part of the page visually disabled or removed. To that end, you can position a semi-transparent div on top of the scrollable div in question, which would capture the mouse events and visually show that the scrollable div is inactive for now.It would be hard to make cross-browser compatible and wouldn't be perfect, but then again very few client-side tricks like this are.

These buttons could of course be disabled easily.

Objects with an overflow of hidden will still scroll in my situation. Try creating a div with an overflow of hidden that is sized to be small but contains a lot of text. You can stills scroll that box with the mousewheel or by clicking and dragging when selecting the text.

– Sebastian Celis Mar 20 '09 at 18:46 You'd have to preventDefault() of the onscroll event etc. I suppose :) – Eric Wendelin Mar 20 '09 at 18:57 Yep, I tried that. Doesn't work. Thanks, though.

– Sebastian Celis Mar 20 '09 at 19:20.

Though it may not be the answer you are looking for, if you are to set the display value of the div to 'none' while the page loads (from the server) and then have an event wired to the page load (either pageLoad in ajax. Net or attach it to the onload event via javascript) that will make the div display set to 'block' .. that would ensure that slower browsers wouldn't see the div 'jumping around' (could even put a 'loading' image in the div to show users it's doing something and not just invisible) sorry I couldn't provide a more complex/fluent solution.

I found a way to work around this issue. By removing the menu element from the scrollable div and then appending it directly to document. Body, the browsers all stop trying to scroll the div to reveal the focused element (even though the element is already completely visible).

Thanks to all for your time and your answers!

The simple answer is no you can't do this. Its doubly no if you want a cross-browser solution.

I agree with Anthony regarding the presentation of the functionality you're trying to disallow. If you're going to disable scrolling, then you should make that part of the page visually disabled or removed.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.