javascript - 如何防止父容器滚动定位为固定的子元素

Question

我有 parent 和 child 。当用户滚动时，子项的属性为“溢出:自动”，结束后，父项开始滚动。如何预防？

即使在子滚动条结束后，我也不需要滚动父容器。

代码如下:

.children{
  height:20em;
  overflow:auto;
  border:2px solid green;
  position:fixed;
  left:0;
  background:gray;
  z-index:100;
}

我有很多内容来展示这个问题，所以请访问链接并滚动 children (灰色背景)

Live Demo

Answer 1

这是浏览器的默认行为。

要防止这种情况，请检查 Leland Kwong 的代码笔。

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

希望对您有所帮助! :)