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

How to prevent the parent container from scrolling the child element positioned as fixed

本文关键字：元素 定位 何防止 滚动      更新时间：2023-09-26

我有一个父母和孩子。当用户滚动时，子项的属性为"overflow：auto"，结束后，父项开始滚动。如何防止这种情况发生？

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

这是代码：

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

我有一些巨大的内容来展示这个问题，所以请访问链接并滚动孩子们（灰色背景）

实时演示

这是浏览器的默认行为。

为了防止这种情况，请检查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);

希望这能帮助你！：）

相关文章：