Independent Bildlauf Eltern und Kind div

Question

Es gibt zwei scrollbare div wie in der folgenden Abbildung.

scroll

The Yellow Div Css:

#workbench-container #workbench md-content .folder .folder-notes { 
    height: auto; 
    max-height: 200px; 
    overflow: auto; 
    width: 100%; 
} 

Und die Eltern Bildlaufleiste ng-scrollbaren Richtlinie.

<div ng-scrollable="{scrollX:'none',scrollY:'right'}" style="width: 100%; height: 600px;"> 

Können Sie zwei div Inhalte unabhängig zu blättern.

Ich habe versucht, an einen Controller die folgenden

angular.element(document.querySelector('.mydiv')).bind('mousewheel', function (e) { 
      var event = e.originalEvent; 
      var d = event.wheelDelta || -event.detail; 
      this.scrollTop += (d < 0 ? 1 : -1) * 30; 
      e.preventDefault(); 
     }); 

Wenn blättern in Kind div (gelber Kasten) das Mutter Scroll zusammen Scrollen ist auch hinzuzufügen. Müssen Sie nur das Div durchsuchen, in dem die Maus platziert ist.

Answer 1

Machen Sie zwei Kinder statt einer.

Machen Sie beide Kinderrollen, grundsätzlich kann es mit der gleichen CSS tun. Kann das Kind in eine Tabelle der Eltern setzen <tr><td><child1></child1></td><td><cdhild2></child2></td></tr>

Und legen Sie die Childs in Ihrem Scroll-Div Ihrer Eltern.