Html 滚动子div使父div滚动

我有以下测试页面：

（没有发布代码，因为太大了） 正如所注意到的，当您完成滚动底部的小div时，主div也会滚动。是否有任何适当的措施来禁止这种行为

---

谢谢。

请参阅此问题中提到的插件：

或者看看这里的JS（不是我的代码）。此代码向子级添加类并捕获可用于防止父级滚动的滚动事件

var-trapScroll；
（函数（$）{
trapScroll=功能（opt）{
变量传递；
var scrollableDist；
var trapClassName='trapScroll enabled'；
var trapSelector='.trapScroll'；
var trapWheel=功能（e）{
if（！$（'body'）.hasClass（trapClassName））{
返回；
}否则{
var curScrollPos=trapElement.scrollTop（）；
var wheelEvent=e.原始事件；
var dY=wheelEvent.deltaY；
//只有当我们滚动到最后时，才能捕获事件
//或开始
if（（dY>0&&curScrollPos>=scrollableDist）||
（是的，
overflow
属性是一种方式。我已经在child div上使用了它。这是默认的浏览器行为，但Facebook、Google Plus等没有这样的行为。工作非常出色！谢谢！
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);