jquery - Mozilla Firefox で間違ったアイテムがスクロールされる

Question

Angular Ui Tree コンポーネントに問題があります。

これが設定です: 2 つのツリーがあります。左側には従来の階層構造があり、右側にはドラッグ可能なアイテムのリストがあります。2 番目のツリーには、多くの重い情報がロードされます。使いやすさの理由から、最初のツリーは 2 つの div (ツリーの上に 1 つ、下に 1 つ) でラップされます。ユーザーが 2 つの div の 1 つにノードをドラッグすると、jQuery スクリプトは関数の実行ごとに最初のツリーのパネルを 50 単位スクロールします。

Google Chrome ではページが完成し、スクロールバーは正しい div で動作します。Firefox では、最初の div ではなく 2 番目の 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 = '';
 });