css - 如何在 Angular 应用程序中触发滚动条/使用溢出属性(通过 ng-repeating 元素)？

Question

我的 Angular 应用程序中有一个侧边栏，我试图让一个 div 深入了解侧边栏中的元素，并且以下 div 中的内容保持相同的位置(不滚动)。我一直在看很多类似的帖子并尝试了所有方法，但它就是行不通。问题是，要么你可以滚动浏览侧边栏中的所有内容，要么根本不滚动，或者底部保持不变(没有移动)，但是我的每个元素(而不是所有元素)都有滚动条。

我使用 ng-repeat 将元素放在侧边栏的范围内 - 它可能与 angular 和 reg 不同。 HTML？谢谢!!附言。我使用的是 gulp，而 sidbar 是我没有在此处包含的指令。如果有什么重要的事情，请告诉我，我会把它包括在内。

<li>
  <a ng-click="openNav()"><i id="cart-icon" class="medium material-icons icon-design">shopping_cart</i></a>
   <div id="mySidenav" class="sidenav closebtn" click-anywhere-but-here="closeNav()" ng-click="closeNav()">

    <div class="sidebarBox">
        <h2 class="sideBarHeader">Cart </h2>

        <div class="sidebarContainer" ng-repeat="item in cart">
            <img src="{{item.imageUrl}}" style="width:90px;height:100px;">

            <div class="sidebarContent">
                <p class="sidebarTitle">{{item.title}} </p>
                <p class="sidebarSubtitle">Quality: {{item.quantity}}</p>
                <p class="sidebarSubtitle">Price: ${{item.price}}</p>
            </div>
            <p class="sidebarLine"></p>
        </div>

    </div>
    <br>
    <div class="sidebarNoScroll">
        <p style="color:black;font-size:22px;">Total</p>
        <p class="sidebarTotal">${{ total() }}</p>
        <button class="sidebarButtonContinueShopping" id='continue-shopping-button' ng-click="closeNav()">Continue Shopping</button>
        <button class="sidebarButtonViewCart" ui-sref='cart' ng-click="closeNav()">View Cart</button>
     </div>

  </div>
</li>

CSS。

.sidebarContainer {
    overflow:scroll;
    height:224px;
 }
.sidebarNoScroll {
     overflow: hidden;
 }

Answer 1

包装容器。

<div class="sidebarContainer">
        <div ng-repeat="item in cart">

        </div>
</div>