javascript - 垂直滚动条适用于 chrome 但不显示

Question

我有一个模型，买家会收到关于他们的购物车中有多少商品的通知，如果商品在模型中溢出，他们可以滚动模型。我的问题是垂直滚动在 chrome 和 firefox 上有效，但在 chrome 上，滚动条不显示。我希望用户看到滚动条以使其对用户友好。

    <style>
    .product {
        font-size: 13px;
    }
    .model-body {
        max-height: 350px;
        overflow: auto;
    }

</style>


<div id="custom-popup-model" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="modal-title" style="color: #c883a3">@*Please take appropriate action*@</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
      <div class="modal-body">
        <div id="cartitems-container" style="max-height: 350px; overflow-y: scroll">

        </div>
        @*<a class="btn-primary btn-sm" href="@Url.RouteUrl("HomePage")" style="background: #c883a3">Continue shopping</a>
        <a class="btn-primary btn-sm" href="@Url.RouteUrl("ShoppingCart")" style="background: #c883a3">Proceed To Checkout</a>*@
      </div>
      <div class="modal-footer">
        <button type="button" class="btn-primary btn-sm" data-dismiss="modal" style="background: #c883a3;border-color:#c883a3">Close</button>
      </div>
    </div>

  </div>
</div>

JS:

    <script>
  $(function() {

    $("#custom-popup-model").on('show.bs.modal',
      function() {
        $.ajax({
          url: '/ShoppingCart/FlyoutShoppingCart',
          type: 'GET',
          success: function(response) {
            var elements = $(response);
            var found = $('.count', elements);
            $("#modal-title").text(found.text());
            elements.find('.count').remove();


            $("#cartitems-container").append(elements);

          },
          //error: function (response) {
          //    alert(response);
          //}
        });
      }).on('hidden.bs.modal',
      function() {
        $("#cartitems-container").html("");
      });
  })
</script>

这是在 Chrome 和 Firefox 上的结果。

有人可以帮忙吗？

Answer 1

Ahsan，你只是把 css 放在模型主体类下面。

.model-body {overflow-y: scroll;min-height: 100px;}