prevent window for scrolling after div box scrolling

I have a small div box that has a vertical scroll bar and sits within an html page th开发者_C百科at 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();
}

---

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

---

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

---

I had a similar problem. Google led me here. Over 1700 views, in 4 years, of an incomplete answer. I figured once I had coded a solution, I'd pop it in a JSFiddle and share it. Better late than never.

Tested on MacOSX / Chrome.

http://jsfiddle.net/mF8Pr/

My problem involved being able to scroll inside a textarea, within a lightbox, and disabling scrolling on the rest of the page beneath the overlay.

1. bind mouse wheel event to document
2. when event fires (optional: test to make sure overlay is visible)
3. check target is obj we want to have scrolling enabled
4. make sure 0 < obj.scrollTop < (obj.scrollHeight - obj.clientHeight)
5. check direction of attempted scroll event.originalEvent.deltaY
   
   • UP == negative
   • DOWN == positive

6. event.preventDefault()

   $(document).bind('mousewheel', function(e){
     //if($overlay.is(':visible'))
     {
       if(e.target != null && e.target.type != 'textarea')
       {
         e.preventDefault();
       }
       else
       {
         if(e.originalEvent.deltaY < 0 && e.target.scrollTop == 0)
         {
           e.preventDefault(); // already at top
         }
         else if(e.originalEvent.deltaY > 0  && e.target.scrollTop >= 
                (e.target.scrollHeight - e.target.clientHeight))
         {
           // must use greater than because sometimes 
           // the math is wrong by 1px         
           e.preventDefault(); // already at bottom
         }
       }
     }
   });
   

-Amanda