Wrong item scrolled on Mozilla Firefox

Question

I have some trouble with the Angular Ui Tree component.

This is the setting: I have two trees, one on the left with a classical hierarchical structure and one on the right with a list of draggable item. The second tree is loaded with a lot of heavy information. For usability reason the first tree is wrapped by two divs ( one above the tree and the second below ). When the user drag a node over one of the two divs a jQuery script scrolls the panel of the first tree by 50unit for each execution of the function.

On Google Chrome the page is complete and the scrollbar works on the correct div, on Firefox the second div is scrolled instead of the first one. What is my mistake?

Preview:

HTML:

    <div id="hover2" class="" style="width: 50%">
        <center> <a class="hoverButton glyphicon glyphicon-menu-up hoverButtonUp" id="hoverButtonUp" ng-mouseover="sethoverUpButtonVariableTrue()" ng-mouseleave="sethoverUpButtonVariableFalse()" ng-class="{hoverButtonClass: hoverUpButtonVariable}"></a> </center>
    </div>
    <div class="col-sm-6 rcorners1 scrollPane" id="scrollPane">
        <div ui-tree="treeOptions" data-empty-placeholder-enabled="true" data-max-depth="maxDepth" id="tree-root" class="atosDiv" ng-show="isTreeReady">
            <ol ui-tree-nodes="" ng-model="data" class="atosDiv">
                <li ng-repeat="node in data" ui-tree-node ng-include="'nodes_root.html'" class="atosDiv" data-collapsed="true"></li>
            </ol>
        </div>
    </div>
    <div class="col-sm-6row rcorners2 unscrollablePane" id="unscrollablePane" ng-if="true">
        <div ui-tree="treeOptions" id="tree-root" class="atosDiv">
            <ol ui-tree-nodes="" ng-model="data2" class="atosDiv">
                <li ng-repeat="node in data2" class="atosDiv" ui-tree-node ng-include="'nodes_rootPdv.html'"></li>
            </ol>
        </div>
    </div>
    <div id="hover" class="" style="width: 50%; margin-bottom: 30px;">
        <center> <a class="hoverButton glyphicon glyphicon-menu-down hoverButtonDown" id="hoverButtonDown" ng-mouseenter="sethoverDownButtonVariableTrue()" ng-mouseleave="sethoverDownButtonVariableFalse()" ng-class="{hoverButtonClass: hoverDownButtonVariable}"></a> </center>
    </div>
</div>

JS:

 var amount = '';

 function scroll() {
     $('#scrollPane').animate({
         scrollTop: amount
     }, 100, 'linear', function() {
         if (amount != '') {
             scroll();
         }
     });
 }
 $('#hover').hover(function() {
     amount = '+=50';
     scroll();
 }, function() {
     amount = '';
 });
 $('#hover2').hover(function() {
     amount = '-=50';
     scroll();
 }, function() {
     amount = '';
 });