从父容器传播滚动事件到子容器

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