Question

我在Laravel框架上聊天。一切正常，但您需要制作一个滚动条以进行聊天。我该怎么办？

我调用聊天的代码是：

 <!-- Chat -->

 <div id="chatContainer" style="">
     <div id="chatHeader">Chat</div>

     <div id="chatBody" style="display: none;">
         <div id="chatScroll" class="nano has-scrollbar">

             <div id="chat_messages" style="right: -17px;
    outline: none;
    border: none;
    overflow: auto;" class="nano-content" tabindex="0" style="right: -17px;">
                 <div id="messages">
                 </div></div>
             <div class="nano-pane" style="display: none;">
                 <div class="nano-slider" style="height: 406px; transform: translate(0px, 0px);"></div></div></div>
         @if(!Auth::guest())
             <textarea id="sendie" maxlength="255" placeholder="Enter message"></textarea>
         @else
         @endif
     </div>
 </div>
 <!-- Chat END -->

在ChatController中，我默认使用30条最新消息。但是我不能做滚动条。我如何添加它？

Answer 1

更改为：

<div id="chatContainer" style="">
     <div id="chatHeader">Chat</div>

     <div id="chatBody" style="display: none;">
         <div id="chatScroll" class="nano has-scrollbar" style="overflow-y: scroll;">

             <div id="chat_messages" style="right: -17px;
    outline: none;
    border: none;
    overflow: auto;" class="nano-content" tabindex="0" style="right: -17px;">
                 <div id="messages">
                 </div></div>
             <div class="nano-pane" style="display: none;">
                 <div class="nano-slider" style="height: 406px; transform: translate(0px, 0px);"></div></div></div>
         @if(!Auth::guest())
             <textarea id="sendie" maxlength="255" placeholder="Enter message"></textarea>
         @else
         @endif
     </div>
 </div>
 <!-- Chat END -->

向您要滚动的div基本添加style="overflow-y: scroll;"

如何在聊天中添加滚动条？

1 个答案: