Scrolling child div makes parent div scrolls - html

Question

I have the following test page:
(didn't post code 'cause would be too big)
As noticed, when you finish scrolling the little div in the bottom, the main div also scrolls. Is there anything, propriety to disable this behaviour?
Thanks.

Answer 1

See the plugin mentioned on this question:
Prevent scrolling of parent element?
Or take a look at the JS here (not my code). This code adds classes to the children and traps the scroll event which can be used to prevent the parent from scrolling.
http://codepen.io/LelandKwong/pen/edAmn
var trapScroll;
(function($){
trapScroll = function(opt){
var trapElement;
var scrollableDist;
var trapClassName = 'trapScroll-enabled';
var trapSelector = '.trapScroll';
var trapWheel = function(e){
if (!$('body').hasClass(trapClassName)) {
return;
} else {
var curScrollPos = trapElement.scrollTop();
var wheelEvent = e.originalEvent;
var dY = wheelEvent.deltaY;
// only trap events once we've scrolled to the end
// or beginning
if ((dY>0 && curScrollPos >= scrollableDist) ||
(dY<0 && curScrollPos <= 0)) {
opt.onScrollEnd();
return false;
}
}
}
$(document)
.on('wheel', trapWheel)
.on('mouseleave', trapSelector, function(){
$('body').removeClass(trapClassName);
})
.on('mouseenter', trapSelector, function(){
trapElement = $(this);
var containerHeight = trapElement.outerHeight();
var contentHeight = trapElement[0].scrollHeight; // height of scrollable content
scrollableDist = contentHeight - containerHeight;
if (contentHeight>containerHeight)
$('body').addClass(trapClassName);
});
}
})($);
var preventedCount = 0;
var showEventPreventedMsg = function(){
$('#mousewheel-prevented').stop().animate({opacity: 1}, 'fast');
}
var hideEventPreventedMsg = function(){
$('#mousewheel-prevented').stop().animate({opacity: 0}, 'fast');
}
var addPreventedCount = function(){
$('#prevented-count').html('prevented <small>x</small>' + preventedCount++);
}
trapScroll({ onScrollEnd: addPreventedCount });
$('.trapScroll')
.on('mouseenter', showEventPreventedMsg)
.on('mouseleave', hideEventPreventedMsg);
$('[id*="parent"]').scrollTop(100);