聊天室設計中的幾個問題

我正在開發一個聊天應用程序，我有兩個主要問題在聊天盒的設計。

我希望屏幕的某些部分可以像其他聊天應用程序一樣滾動，當我們有更多的消息時，我們可以向上滾動查看以前的消息，而屏幕上的其他內容是固定的，如：sendbar,top-menu-bar，等等。但我無法做到這一點，我嘗試了overflow-y = scroll，但沒有成功。
正如我在第一點中提到的，有些事情必須在屏幕上修復，但是在設置position = fixed之后，它也不起作用。

我什么都試過了請幫幫我。

Output

發布于前

? 最佳回答：

function fxn(){
  var text = document.getElementById("inp").value
  var ele = document.getElementById("parent")
  var foo = document.createElement("div")

  foo.innerHTML = "<div class = box1>" + text + "</div><br><br><br>";
  ele.appendChild(foo)
 ele.scrollTop = ele.scrollHeight;
}

#parent{
  height:100px;
  overflow-y:scroll;
}
#box {
  margin-bottom: 10px;
  background-color: aqua;
  width: 300px;
  border: solid 2px black;
}

.box1 {
  display: inline;
  padding: 10px;
  border-radius: 15px;
  width: 300px;
  border: solid 2px black;
}

.out{
  position: fixed;
  width: 100%;
  background-color: aquamarine;
}

<body id="bd">
  <div id ="box">
    Testing chat box
  </div>
  <div id="parent"></div>
  <div class="out">
    <input type="text" id="inp">
  <button onclick="fxn()">Send</button>
  </div>
</body>

請注意，我在這里為父div添加了height和要滾動的overflow-y，并在js部分添加了 ele.scrollTop = ele.scrollHeight;。

在這里你可以閱讀更多關于ScrollTop的信息

公眾號：1024技術圈

?? 提供互聯網知識和資訊，分享IT前沿技術，熱門資源，大廠面試題 ??

聊天室設計中的幾個問題

熱門問答

將包含多個導出常量的“<path>”中的多個“import*as<name>”合并為index.js的1個導出

閃亮：切換選項卡時保持reactive選擇退出選擇

模態循環不正確

Swift switch聲明未涵蓋所有情況

試圖理解一些基本的Javascript邏輯

C當掃描集處于一定長度或讀取特定字符時，如何使掃描集停止

magento中的concat sql查詢

刪除位于<b> 中間的文本

Nginx中Golang App的基本配置

要在 Vue3表格中實現導出內容具備篩選的功能

在webstorm里關閉了eslint,但vue element admin里還是有提示

mysql浮點數兩位小數