html - 无法在模态中滚动 div

Question

我有一个 AngularJS 应用程序，它使用相同的模态来提问。在一种模式中，我可以滚动内容，但在另一种模式中，以相同的方式生成，我不能。所有滚动都可以在台式机上正常工作，但不能在移动设备上（Safari 和 Chrome）。我已经阅读了很多关于这个问题的其他帖子，但我还没有解决这个问题......

此模式确实滚动：

<div class="mod mod--info" ng-init="displayInfo('order')" style="overflow: scroll;">
    <div class="mod__loading" ng-show="!orderInfo">
        <fa name="spinner" spin></fa>
        <small>{{ 'modal.info.fetch' | translate }}</small>
    </div>
    <div class="mod__list">
        <ul>
            <li class="mod__box" ng-repeat="batch in orderInfo track by batch.batch_id" ng-show="batch.order_lines.length > 0">
                <span>
                    <label ng-show="batch['full_name']">{{ 'modal.info.batch' | translate }} {{ batch['created_at'] | amDateFormat:'DD-MM-YYYY HH:mm:ss' }}</label>
                    <small>{{ 'modal.info.by' | translate }} {{ batch['full_name'] }}</small>
                </span>
                <ul>
                    <li ng-repeat="line in batch.order_lines">
                        <label ng-bind-html="fixedLine(line)"></label>
                        <ul class="indent" ng-show="line.additions.length > 0">
                            <li ng-repeat="addition in line.additions">
                                <label>{{ addition.quantity }} x {{ addition.product }}</label>
                            </li>
                        </ul>
                        <ul class="indent" ng-show="line.menu_items.length > 0">
                            <li ng-repeat="menu_item in line.menu_items">
                                <label>{{ menu_item.quantity }} x {{ menu_item.product }}</label>
                                <ul class="indent" ng-show="menu_item.additions.length > 0">
                                    <li ng-repeat="menu_item_addition in menu_item.additions">
                                        <label>{{ menu_item_addition.quantity }} x {{ menu_item_addition.product }}</label>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</div>
<div class="button button--danger" hm-tap="close()">
    <fa name="times"></fa> {{ 'general.close' | translate }}
</div>

这个没有：

<div class="mod">
    <div class="mod__list" ng-show="$index == step" ng-repeat="q in questions track by $index">
        <div class="mod__heading">
            <h4>
                {{ product['receipt_name'] }}
                <small>
                    {{ 'modal.question.sequal' | translate }} {{ $index + 1 }}
                </small>
            </h4>
        </div>
        <div class="mod__list-item-container">
            <div class="mod__list-item mod__list-item--dark-blue ignore-nth-child" ng-repeat="a in q['answers']" hm-tap="add(a['product'])">
                <span>
                    {{ a['product']['display_name'] }}
                    <span ng-show="a['price'] > 0" ng-bind="formatPrice(a['price'])"></span>
                </span>
            </div>
        </div>

        <div class="mod__list-item mod__list-item--pink" hm-tap="cancel()" ng-show="parser.toBoolean(q.required)">Annuleren</div>
        <div class="mod__list-item mod__list-item--pink" hm-tap="next()" ng-hide="parser.toBoolean(q.required)">
            {{ 'modal.question.skip' | translate }} <fa name="share"></fa>
        </div>
    </div>
</div>

mod__list-item-container 的 CSS：

&__list-item-container {
    width: 100%;
    max-height: 70vh;
    overflow: scroll;
    //overflow-y: scroll;
    //-webkit-overflow-scrolling: touch;
  }

有人有想法吗？

标签： htmlcssangularjs