滚动子项 div 使父项 div 滚动

Question

我有以下测试页：

（没有 post 代码因为太大了）如前所述，当您完成滚动底部的小 div 时，主要的 div 也会滚动。有什么办法可以禁止这种行为吗？

谢谢。

Answer 1

查看本题提到的插件：

Prevent scrolling of parent element?

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

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);

滚动子项 div 使父项 div 滚动

Scrolling child div makes parent div scrolls

html

css

twitter-bootstrap

twitter-bootstrap-3