0

我在使用 Angular Ui Tree 组件时遇到了一些问题。

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

在谷歌浏览器上，页面是完整的，滚动条在正确的 div 上工作，在 Firefox 上，第二个 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 = '';
 });
4

0 回答 0