我有一個 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>
如果某些內(nèi)容已添加到 `div`,則滾動到內(nèi)容的底部
慕尼黑5688855
2023-05-19 14:33:55