时间戳

首页 > 解决方案 > 仅滚动水平行的一部分，保持另一部分固定

css - 仅滚动水平行的一部分，保持另一部分固定

问题描述

html 

<div class="xxx">
    <div class="xyz" ng-repeat="item in formList">
        <div ng-show="formList.indexOf(app)!= -1" class="added-item">
            <img class="col-md-6 added-item-icon" ng-src="app.iconFile"/>
        </div>
    </div>
    <div class="abc" ng-hide="formList.length>20">
        <button class="btn" ng-click="addItem()">
            Add<i class="glyphicon glyphicon-plus"></i>
        </button>
    </div>
</div>

css

.xxx {
    width:500px;
    height: 80px;        
}
.added-item-icon, .abc {
    width: 50px;
    height: 50px;
}

我不擅长css，只有非常基本的知识我正在尝试在高度80和宽度500像素的水平选项卡中添加一些项目列表，也是一个添加应用程序按钮根据代码，添加应用程序按钮当我们添加第 20 个应用程序时消失

我需要做的是，假设 xxx div（水平 div）可以有 5 个项目，之后发生溢出我想在那个阶段将溢出设置为水平，而不是垂直（当添加 5 个项目时），我想修复 xxx 分区最右边的添加应用按钮，溢出滚动不影响该按钮，应该修复

我们不需要更关心项目图标或添加按钮的大小，请帮助

标签： cssangularjs

解决方案

为此，您需要考虑使用flexbox。要使其正常工作，您真正需要做的就是添加display: flex; flex-direction: column到您的容器中，然后添加到您overflow-y: auto要滚动的部分。

这是一个Plunker演示它。

推荐阅读