css - 背景滚动不起作用
问题描述
我正在实现一个聊天模块,如链接或 facebook。用户列表是一个父组件(col-md-12),每次用户点击后,我都会创建一个新的子组件(每个 col-md-3)。一切正常,但 (col-md-12) 上的滚动选项不起作用。父组件和子组件的位置是固定的,因此只有当我在 col-md-12 类区域之外滚动时,背景滚动才有效。
<div class="row" >
<div class="content">
<div class="row">
<div class="col-md-12" id="ng-chat-view">
<div class="col-md-3 chat-farmer-list-ui">
<div id="ng-chat-people" [ngClass]="{'ng-chat-people-collapsed':isCollapsed}">
<a href="javascript:void(0);" class="ng-chat-title shadowed" matTooltip={{farmerListTooltip}} (click)="onChatTitleClicked($event)">
<span>
Farmer List
</span>
</a>
<input *ngIf="!isCollapsed" id="ng-chat-search_friend" type="search" placeholder="Search" [(ngModel)]="search" (ngModelChange)="getFarmerBySearchVal(search)"
/>
<ul id="ng-chat-users" *ngIf="!isCollapsed">
<li *ngFor="let user of farmers">
<div *ngIf="!user.imageUrl" class="icon-wrapper">
<i class="user-icon"></i>
</div>
<img *ngIf="user.imageUrl" alt="" class="avatar" height="30" width="30" src="{{user.imageUrl}}"/>
<strong title="{{user.user}}" (click)="openChatWindow(user, true)">{{user.name}}</strong>
</li>
</ul>
</div>
</div>
<div class="col-md-9 m-l">
<div *ngFor="let user of userInfo; let i = index">
<div>
<app-chatwindow [userInfo]="user" (onWindowCloseNotify)="onWindowCloseInChildComponent($event)"></app-chatwindow>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
#ng-chat-view{
position: fixed;
bottom: 0%;
margin-right: 10px;
font-family: Roboto,RobotoDraft,Helvetica,Arial,sans-serif;
font-size: 15px;
z-index:999;
cursor: pointer;
}
.row .m-l{
margin-left: -92px;
float: left;
}
@media (min-width: 992px){
.chat-farmer-list-ui {
float: right;
}
}
解决方案
推荐阅读
- python-3.x - Setting draw-order (like matplotlib zorder) for multi-trace/multi-y-axes figure
- javascript - 将二进制数据转换为 base64 不适用于 btoa unescape
- swift - Reality Composer – How to change shadow opacity?
- r - 相对于变量的模态绘制具有不同颜色的 geom_vlines
- java - 使用 Void 或返回类型方法将值设置为对象
- python - 将字符串列转换为浮点数时出错
- amazon-web-services - InstanceID 和 ImageID 的区别
- docker - Mediawiki 与 Docker Imagemagick
- java - Spring 5.0.7.RELEASE 中的 Web 层单元测试和集成测试
- python - Python numpy 用索引拆分