Question

解释我想用图像做什么会更容易。

这是下拉列表：（http://i.imgur.com/Y1bjEGB.png）

在＆＃34; composicion_estadistica＆＃34;当您单击它时会出现折叠的字段。问题是，当我点击它时，我得到：（http://i.imgur.com/45zhaZl.png）

展开的字段不显示，您需要向下滚动才能看到它们。我希望当字段扩展时它会自动向下滚动，以便您可以看到新字段。

在这种情况下，滚动到下拉菜单的末尾就足够了，但情况可能并非总是如此，是否可以向下滚动到特定位置？例如：如果展开了10个新字段，我想向下滚动10行。

希望我能很好地解释自己。

以下是代码：

<div class="dropdown" style="display:inline-block;">
<button class="btn btn-default btn-filtro btnWidget" type="button" data-toggle="dropdown" aria-expanded="true">
    Agregar Orden  <span class="caret"></span>
</button>

<ul class="dropdown-menu" style="overflow-y:auto; max-height:300px;">
    <li class="dropdown" style="margin-left: 30px; cursor: pointer;" ng-repeat="field in controller.fields">
        {{field.name}}
    </li>

    <li class="divider"></li>
    <li class="dropdown-header" style="padding: 3px 10px; font-weight: bold; cursor: default;" ng-click="$event.stopPropagation();">Relaciones</li>

    <ng-repeat ng-repeat="relacion in controller.relaciones" ng-init="relacion.show = false">
        <li class="dropdown-header" style="padding: 3px 20px; font-weight: bold; cursor: default;" ng-click="relacion.show = !relacion.show; $event.stopPropagation();">
            <span class="" ng-class="{'caret-right': !relacion.show, 'caret-bottom': relacion.show}"></span>
            {{relacion.name}}
        </li>
        <li class="dropdown" style="margin-left: 30px; cursor: pointer;" ng-repeat="field in relacion.fields" ng-show="relacion.mostrar">
            {{field.name}}
        </li>
    </ng-repeat>

</ul>

Answer 1

使用“angular-scroll-glue”：一个AngularJs指令，在其范围发生变化时自动滚动到元素的底部。

希望它会有所帮助。来源：https://github.com/Luegg/angularjs-scroll-glue

如何以编程方式滚动下拉菜单

1 个答案: