如何防止父容器滾動定位爲固定的子元素

我有父母和子女。當用戶滾動時，孩子的屬性爲'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

如何防止父容器滾動定位爲固定的子元素

回答

相關問題