首页 > 解决方案 > 背景滚动不起作用

问题描述

我正在实现一个聊天模块,如链接或 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;
     }
    }

错误

标签: csstwitter-bootstrap-3

解决方案


推荐阅读