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

我有父母和子女。当用户滚动时，孩子的属性为'overflow：auto'，结束后，父开始滚动。如何防止这种情况？如何防止父容器滚动定位为固定的子元素

即使在儿童卷轴结束后，我也不需要父容器滚动。

这里是代码：

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

我有一些巨大的内容，以显示这个问题，所以请访问链接和滚动儿童（灰色背景执行）

Live Demo

来源

2016-01-13 3gwebtrain

您可以使用javascript，但不是一个好主意，因为是操作系统和浏览器的默认行为。用户想要制作它。用JavaScript你需要停止冒泡（搜索它）。 –

你的意思是当你滚动孩子，它达到其结束，然后身体开始scoll ....使用鼠标滚轮？ – LGSon

[如何在滚动DIV元素时防止页面滚动？]（http://stackoverflow.com/questions/7600454/how-to-prevent-page-scrolling-when-scrolling-a-div-element） – Abhitalks

这是浏览器的默认行为。

为了防止这个检查由Leland Kwong这codepen。

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

希望这可以帮助你！ :)

来源

2016-01-13 11:53:16

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

回答

相关问题