簡體   English   中英

我怎樣才能讓它顯示這個元素的底部? (HTML, CSS, JS)

[英]How can i make it show the bottom of this element? (HTML, CSS, JS)

我希望用戶能夠看到之后發送的消息,他們看不到因為空間不足,我不希望元素不斷擴展,這樣它就不會破壞/破壞元素。

我怎樣才能讓這個顯示在 AA 之后發送的內容? https://i.imgur.com/g13UDBg.png

使用 Socket.io、jquery、js、html 和 ZC7A628CBA22E28EB16AZ5F5C6AE22。

<!-- code -->
<div style="float:right;margin-right:3%; height:550px;">
  <ul id="messages" style="height: 85%;"></ul>
      <form action="" style="">
        <input id="m" autocomplete="off" /> <button class="btn-primary">Send</button>
      </form>
  </center>
</div>

<script src="/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
 $(function () {
    var socket = io();
    $('form').submit(function(e){
      e.preventDefault(); // prevents page reloading
      socket.emit('chat message', $('#m').val());
      $('#m').val('');
      return false;
    });
    socket.on('chat message', function(msg){
      $('#messages').append($('<li>').text(msg));
    });
  });
</script>

要使所有數據垂直可見,您必須添加

CSS

overflow-y : scroll;

給你的ul

之后,在插入數據后向下滾動的平滑運動添加 animation 為

Jquery

$(document).ready(function(){
  $("input").keyup(function(){
 $('ul').animate({scrollTop: '100%'}, 800);
  });
});

一種解決方案是在您的聊天框中添加滾動條,

<!-- code -->
<div style="float:right;margin-right:3%; height:550px; ">
  <ul id="messages" style="height: 85%;overflow-y: scroll;"></ul>
      <form action="" style="">
        <input id="m" autocomplete="off" /> <button class="btn-primary">Send</button>
      </form>
  </center>
</div>

<script src="/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
 $(function () {
    var socket = io();
    $('form').submit(function(e){
      e.preventDefault(); // prevents page reloading
      socket.emit('chat message', $('#m').val());
      $('#m').val('');
      return false;
    });
    socket.on('chat message', function(msg){
      $('#messages').append($('<li>').text(msg));
    });
  });
</script>

這將為您提供如下所示的內容:

帶有滾動條的聊天框圖片

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM