在Mozilla Firefox上滚动了错误的项目

Question

我对Angular Ui Tree组件有些麻烦。

这是设置：我有两棵树，一张在左边，有一个经典的层次结构，一张在右边有一个可拖动项目列表。第二棵树载满了大量重要信息。出于可用性原因，第一棵树由两个div包裹（一个在树上方，另一个在下面）。当用户将节点拖过两个div中的一个时，jQuery脚本会在每次执行该函数时将第一个树的面板滚动50unit。

在Google Chrome浏览器上，页面已完成，滚动条适用于正确的div，在Firefox上滚动第二个div而不是第一个div。我的错是什么？

预览：

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