從父容器傳播滾動事件到子容器

Question

我打算將頁面拆分爲2列，有時左列會有溢出，而右列不會溢出。右列將是父母，左列是溢出的孩子。

---

.parentDiv 
 
{ 
 
    background-color: red; 
 
} 
 

 
.childDiv 
 
{ 
 
    background-color: green; 
 
    height: 100px; 
 
    width: 300px; 
 
    overflow-y: scroll; 
 
    overflow-x: scroll; 
 
}

<div class="parentDiv"> 
 
    scrolling in this area should scroll the inner overflow div <br> 
 
    scrolling in this area should scroll the inner overflow div <br> 
 
    scrolling in this area should scroll the inner overflow div <br> 
 
    scrolling in this area should scroll the inner overflow div <br> 
 
    scrolling in this area should scroll the inner overflow div <br> 
 
    scrolling in this area should scroll the inner overflow div <br> 
 
    <div class="childDiv"> 
 
     this should scroll only form outside and inside<br> 
 
     this should scroll only form outside and inside<br> 
 
     this should scroll only form outside and inside<br> 
 
     this should scroll only form outside and inside<br> 
 
     this should scroll only form outside and inside<br> 
 
     this should scroll only form outside and inside<br> 
 
     this should scroll only form outside and inside<br> 
 
     this should scroll only form outside and inside<br> 
 
     this should scroll only form outside and inside<br> 
 
     v 
 
     this should scroll only form outside and inside<br> 
 
    </div> 
 
</div>

---

我成立了一個類似的情景在這裏： http://jsfiddle.net/y1byh25d/1/

基本上，我想捕捉在紅色區域滾動事件，並造成綠色溢出容器滾動。這有點奇怪。

Answer 1

我想我已經想通了:)。這裏是JSFiddle

$(".parentDiv").on("wheel", function(e){}); 

檢測當滾動超過母體DIV發生

if(e.originalEvent.deltaY < 0 && scroll > 0) { 
    scroll -= 10; 
    } 
    else if(e.originalEvent.deltaY > 0 && scroll < maxScroll){ 
     scroll += 10; 
    } 

，其檢測用戶是否向上或向下滾動一些條件邏輯。它還檢查子div是否可以進一步向上/向下滾動。 然後，如果符合這些條件，它將修改將分配給scrollTop（）的值。

$(".childDiv").scrollTop(scroll); 

新的滾動值被應用到子div並滾動。

.childDiv{ 
    overflow-y: hidden; 
} 

應用overflow：hidden;因爲這是禁用childDiv滾動的最簡單方法。

就這樣！下面是使用的完整代碼，請記住，這是使用jQuery，因此需要啓用腳本。

HTML

<div class="parentDiv"> 
    <p>nothing to see here <br>nothing to see here <br>nothing to see here <br>nothing to see here <br>nothing to see here <br>nothing to see here <br>nothing to see here <br>nothing to see here <br>nothing to see here <br>nothing to see here <br>nothing to see here <br>nothing to see here <br> 

    </p> 
    <div class="childDiv"> 
     this should scroll only form outside and inside<br> 
     this should scroll only form outside and inside<br> 
     this should scroll only form outside and inside<br> 
     this should scroll only form outside and inside<br> 
     this should scroll only form outside and inside<br> 
     this should scroll only form outside and inside<br> 
     this should scroll only form outside and inside<br> 
     this should scroll only form outside and inside<br> 
     this should scroll only form outside and inside<br> 
     v 
     this should scroll only form outside and inside<br> 
    </div> 
</div> 

CSS

.parentDiv 
{ 
    background-color: red; 
} 

.childDiv 
{ 
    background-color: green; 
    height: 100px; 
    width: 100%; 
    overflow-y: hidden; 
} 

jQuery的

var scroll = 0; 
var maxScroll = $(".childDiv").prop('scrollHeight')-$(".childDiv").height(); 
$(".parentDiv").on("wheel", function(e){ 
    if(e.originalEvent.deltaY < 0 && scroll > 0) { 
    scroll -= 10; 
    } 
    else if(e.originalEvent.deltaY > 0 && scroll < maxScroll){ 
     scroll += 10; 
    } 
    $(".childDiv").scrollTop(scroll); 
}); 

Answer 2

基於由RMO答案，我做了一個小小的變化，以適應平滑滾動，如在Mac上。

//enable event listener only when needed. 
    $scope.$watch('$root.fpo.scrollLocked', function() { 
     if(true === $scope.$root.fpo.scrollLocked) 
     { 
      $parent.on("wheel", function(e) { 
       maxScroll = $container.prop('scrollHeight')-$container.height(); 

       if(e.originalEvent.deltaY < 0 && scroll > 0) { 
        scroll += e.originalEvent.deltaY; 
       } 

       else if(e.originalEvent.deltaY > 0 && scroll < maxScroll){ 
        scroll += e.originalEvent.deltaY; 
       } 
       e.preventDefault(); 
       $container.scrollTop(scroll); 
      }); 
     } 
     else 
     { 
      $parent.off('wheel'); 
     } 
    });