親コンテナからスクロールイベントを子コンテナに伝播する

Question

ページを2列に分割します。左側の列にはオーバーフローがあり、右側の列には分割されません。右の列はParent、左の列はオーバーフローの子です。

---

.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

私はそれを考え出したと思う:)。親のdivの上にスクロールが

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

ユーザーがスクロールアップまたはダウンしているかどうかを検出するいくつかの条件ロジックを発生したときにここでJSFiddle

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

が検出されています。また、子divがそれ以上スクロールできるかどうかをチェックします。 これらの条件が満たされた場合、scrollTop（）に割り当てられる値が変更されます。

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

新しいスクロール値が子divに適用され、スクロールされます。

.childDiv{ 
    overflow-y: hidden; 
} 

オーバーフローを適用：隠し;これはchildDivのスクロールを無効にする最も簡単な方法だからです。

すべてです。ここでは完全なコードを使用していますが、これはjQueryを使用しているので、スクリプトを使用できるようにする必要があることに注意してください。 RMOによって回答に基づいて

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

、私が作っこれは、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'); 
     } 
    });