prevent window for scrolling after div box scrolling

Question

Hello, I have a small div box that has a vertical scroll bar and sits within an html page that also has a vertical scroll bar.

My problem is when the user reaches the end of the small DIV box scrolling, the ENTIRE html page that contains the div box then begins to scroll (assuming the user is scrolling via the mouse scroll and NOT by actually clicking the DIV box scroll buttons themselves)

is there a way to prevent the entire html page from scrolling once a user reaches in end of my small DIV box scroll? Any help would be much appreciated! Thank you!

I have tried this (but it cancels scrolling for even the div box):

if (window.addEventListener)
    /** DOMMouseScroll is for mozilla. */
    window.addEventListener('DOMMouseScroll', handleWheelEvent, false);
/** IE/Opera. */
window.onmousewheel = document.onmousewheel = handleWheelEvent;

function handleWheelEvent(e){
    e.preventDefault();
}

Answer 1

You would need to modify the handleWheelEvent function and check the srcElement property of the e event and call preventDefault() when it's not scrolling the DIV box. Here's a link with some code examples:

http://www.webdeveloper.com/forum/archive/index.php/t-158824.html

Answer 2

I didn't look too much into your code and the problem, but I wanted to throw out a suggestion before I move on :P.

window.addEventListener

and

document.onmousewheel = handleWheelEvent;

are normally good ways to apply what you want to do the ENTIRE document, whereas if you want to apply a specific value (in this case scroll = false) to a specific element, then you need to set the reference to that specific reference (i.e. getElementById() and then it applies only to the element of the document).

Idk - maybe that helps, maybe it doesn't :P good luck.

-J