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, You just put below css in model-body class.

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

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

1 个答案: