Html 主垂直滚动会影响固定div中的滚动

我需要一个带有overflow-y的基本容器，并固定在页面底部。
我的问题是页面的主卷轴影响了容器卷轴。
当主滚动条位于顶部时，聊天滚动条工作正常，但当它位于底部时，聊天滚动条工作不正常

我的代码中的错误在哪里

<style>
.floatChat{
    position: fixed;
    bottom: 30px;
    left: 95px;
    z-index: 1001;      
    height: 250px;           
    font-size: 12px;    
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;}
</style>

<div id="chatPanel"> <div class="floatChat">
         <div id="chat" class="col-md-3">
            <div class="panel panel-primary" style="width:250px;">
            <div class="panel-heading" style="height:30px; font-size:12px; border-color:#069;">
                <div class="panel-actions" style="height:30px;">
                    <div class="btn-group">                                          
                    <i class="fa fa-pencil btn" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Practise"></i>
                    <i class="fa fa-times btn" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Close" onclick="removeChatBox(index);"></i>
                    </div>                                                         
                </div>
                <div class="text-bold"><i class="fa fa-comments"></i> friendName </div>                                               
            </div>
            <div class="panel-body bg-inverse" style="height:210px;">
                <div style="height:190px; width:230px;">
                    <div id="mesContainer" style="overflow-x:hidden; overflow-y:auto; height:170px; word-wrap: break-word;">                                            
                    </div>
                </div>
            </div>
            <div class="panel-footer" style="padding:0px;">
                <div class="input-group input-group-in">
                    <input id="mes" type="text" class="form-control input-sm">
                    <span class="input-group-btn">
                        <button id="send" class="btn btn-primary" type="button" onclick="sendChatMessage(friendId)";><i class="fa fa-share text-midnight"></i></button>
                    </span>
                </div>                 
            </div>
            </div>
        </div>
    </div></div>

.floatChat{
位置：固定；
底部：30px；
左：95px；
z指数：1001；
高度：250px；
字体大小：12px；
-webkit过渡：所有0.3秒轻松；
-moz转换：所有0.3秒轻松；
-o-过渡：所有0.3秒的速度；
转换：所有0.3s都容易；}
友名

---

MesContainer

是消息的容器。

发现我有一个带有

-webkit转换：translateZ（0）

在类中定义的

这解决了整个问题

我建议你用这个