Scrolling child div scrolls the page only in IE8

Question

I have a div in the page which has scroll bar, when the div scroll ends page scrolling starts. which is a default behavior of any browser, but still i want to stop scrolling the page once div scroll ends. I have a fix for this here is sample that i have created in fiddle.

But the above solution works for Chrome, Firefox, IE9. But not working in IE8.

Please let me know if you find a solution for this.

Thanks, Gopi

I tried this on FF 13 on a mac, the scroll stops but as soon as I move the mouse and try to scroll again it will scroll the page even if the mouse is still inside of the div — Huangism, Jul 06 '12 at 13:31
After playing with it, it looks like other browsers make an extra mousewheel call after the scroll reaches the bottom. IE8 doesn't. So if you print out the last scrollTop that's called in the method, in IE8 it's less than the max, in Chrome, it is the max. I can't think of an easy fix off the top of my head (other than my personal favorite, "Don't use IE"). I feel like it might be doable, but it also might be very messy. My instinct would be to say not to override browser behavior like that. http://stackoverflow.com/questions/5802467/prevent-scrolling-of-parent-element — Andrew, Jul 10 '12 at 22:19

score 0 · Answer 1 · edited May 23 '17 at 12:20

As Andrew stated above, have you tried this demo by @amustill (Prevent scrolling of parent element?)?

Demo:

http://jsbin.com/ixura3/3/

JS:

$(function() {

  var toolbox = $('#toolbox'),
      height = toolbox.height(),
      scrollHeight = toolbox.get(0).scrollHeight;

  toolbox.bind('mousewheel', function(e, d) {
    if((this.scrollTop === (scrollHeight - height) && d < 0) || (this.scrollTop === 0 && d > 0)) {
      e.preventDefault();
    }
  });

});

HTML:

<div id="toolbox">
    Text that scrolls...
</div>

This requires jQuery and the jQuery Mousewheel Plugin.

Scrolling child div scrolls the page only in IE8

1 Answers1