0

jsFiddle

Trying to vertically scroll the div child in Google Chrome, arrived at the end, if you try to continue the scroll is also scrolled the div parent, which does not happen with Mozilla. How to fix it?

Martin Turjak
  • 20,896
  • 5
  • 56
  • 76
user2812929
  • 1
  • 1
  • 1
  • this might be what you are looking for: http://stackoverflow.com/questions/5802467/prevent-scrolling-of-parent-element – GottZBot Sep 24 '13 at 22:20
  • The problem I've seen is here too, but I have not figured out how to solve with pure javascript, or perhaps (better) css... http://jsbin.com/ixura3/3 – user2812929 Sep 24 '13 at 22:30
  • what version of google chrome do you use? It's working well for me on jsFiddle. I'm working with version 29. – Dvir Sep 24 '13 at 22:35
  • I have tried both on Chrome 29 (Win), and Chrome 29 (Linux). The problem is that scroll to the end of the div child, if you continue scroll is also scroll the parent div, and I do not want this. Do you want a gif for you to see what happens? – user2812929 Sep 24 '13 at 22:38

2 Answers2

0

With jquery you can disable the overflow when mouse is over the child div. This way works on Firefox 24 for Mint, and Chromium 28...

http://jsfiddle.net/JcUxs/2/

$('.child').on('mouseover',function(){
    $(this).parent().addClass('fixoverflow');
});

$('.child').on('mouseleave',function(){
    $(this).parent().removeClass('fixoverflow');
});

css:

.fixoverflow{
    overflow: hidden
}
BENARD Patrick
  • 30,363
  • 16
  • 99
  • 105
0

I think that this is the best solution I can achieve (It took 1 hour to understand that the scroll event and the wheel is getting trigger both):

I used flag variable to keep the scroller position. I used jquery and I noticed just now from the comments that you asked for pure javascript. Anyway jquery bases on native javascript so I'll edit my answer later and translate it to pure code.

Just confirm that it's good enough for you and i'll translate it.

JavscriptCode:

var isCanceled = false;
var currentPos = $(".parent").scrollTop();
var stopWheelTimer = undefined;

$(".child").on('mousewheel', function (event) {
    clearTimeout(stopWheelTimer);
    event.stopPropagation();
    isCanceled = true;
    currentPos = $(".parent").scrollTop();
    stopWheelTimer = setTimeout(function(){
        isCanceled = false;        
    }, 250);

});
$(".parent").on('mousewheel', function (elem) {
   if(isCanceled)
   {
       $(elem.target).scrollTop(currentPos);
   }
}); 
$(".parent").on('scroll', function (elem) {
   if(isCanceled)
   {
       $(elem.target).scrollTop(currentPos);
    }
});

Working Example:
jsFiddle

Dvir
  • 3,287
  • 1
  • 21
  • 33