第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如果某些內(nèi)容已添加到 `div`,則滾動到內(nèi)容的底部

如果某些內(nèi)容已添加到 `div`,則滾動到內(nèi)容的底部

慕尼黑5688855 2023-05-19 14:33:55
我有一個 div,如果某些內(nèi)容已添加到div.這個 div 有動態(tài)添加的內(nèi)容,需要一直向下滾動?,F(xiàn)在,如果用戶決定向上滾動,那么如果添加了新內(nèi)容,無論滾動條的當前位置如何,我都希望它跳回到底部,它不應(yīng)該等待用戶再次向下滾動,比如在大多數(shù)聊天應(yīng)用程序中。我將如何著手創(chuàng)建它?我已經(jīng)嘗試了下面的代碼,但它似乎沒有用。let tempCounter = 0;var msgdiv = document.getElementById("messages");function addContent() {  msgdiv.innerHTML +=    "Long long content " + tempCounter++ + "!<br/>";/***  msgdiv.scrollTop = msgdiv.scrollHeight - msgdiv.clientHeight;  ***/    msgdiv.scrollTop = msgdiv.scrollHeight;}setInterval(function() {  addContent();}, 500)html,body {  height: 100%;  margin: 0;  padding: 0;}.h-100 {  height: 100%;}.flex-column {  flex-direction: column;}.d-flex {  display: flex;}.mh-100 {  max-height: 100%;}.chat-messages {  flex: 1;  height: 100%;  overflow: auto;  display: flex;  flex-direction: column-reverse;}.bg-white {  background-color: #fff;}.chat-messages-text {  display: flex;  justify-content: flex-start;}<div class="d-flex flex-column h-100">  <div class="chat-messages bg-white">    <div class="chat-messages-text" id="messages">    </div>  </div>  <div class="chat-input bg-warning ">    <textarea class="form-control" id="inputs" rows="3"></textarea>    <button type="button" onclick="addContent()" class="btn btn-primary mb-2"> Send Message </button>  </div></div>
查看完整描述

2 回答

?
千巷貓影

TA貢獻1829條經(jīng)驗 獲得超7個贊

如果你使用

msgdiv.scrollIntoView(false);

它會將滾動視圖保持在元素的底部。(true 會將其保留在頂部。)


查看完整回答
反對 回復(fù) 2023-05-19
?
神不在的星期二

TA貢獻1963條經(jīng)驗 獲得超6個贊

您可以使用Mutation Observer?API 來檢測您的 div 的變化,然后您可以觸發(fā)滾動到底部



查看完整回答
反對 回復(fù) 2023-05-19
  • 2 回答
  • 0 關(guān)注
  • 179 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號