Within the chat.html file, I have included a div tag and implemented a script that dynamically adds rows to the div when a button is clicked. In another file named list.html, I have inserted an iframe tag with the src attribute pointing to chat.html. However, upon loading the chat.html page, the div does not automatically scroll to the end, requiring manual scrolling instead. To address this issue, I aim for the div to auto-scroll to the end whenever new content is added.
//list.html page code
<body>
<div class="row">
<div class="col-lg-6 mx-auto mt-5">
<iframe width="1000px" height="650px" src="EarlyChat.html" ></iframe>
</div>
</div>
</body>
//chat.html page code
<section style="padding: 50px 0 0 0">
<div id="questions" style="margin-bottom: 85px !important;"></div>
<div class="msg-box">
<div class="form-group">
<input type="text" class="input-box sty-one" id="message" placeholder="Enter message"> <button type="submit" class="btn btn-primary btn-lg mb-2" style="margin-top: 5px" onclick="sendmessage()">send</button>
</div>
</div>
</section>
function sendmessage(){
db.collection("ChatRoom").doc(userid).collection("Cities").orderBy("Time")
.onSnapshot(function(querySnapshot) {
var store_row = document.createElement("questions");
var store;
$('#questions').empty();
querySnapshot.forEach(function(doc) {
typeofmessage = doc.data().SenderId;
time = doc.data().Time.toDate();
console.log("typeofmessage value is",typeofmessage,time);
message = doc.data().message;
store = document.createElement("div");
if(typeofmessage == "Df"){
leftids.push(message)
store.setAttribute("class", "card no-border");
store.setAttribute("id", doc.id);
store.innerHTML = `<div class="container1 darker">
<img src="assets/images/user1.png" alt="Avatar" style="width:100%;">
<p class="text-left">` + message + `</p>
<span class="time-left">` + time.getHours() + ":" + time.getMinutes() + `</span>
</div>`;
}
else if(typeofmessage == userid){
rightids.push(message)
store.setAttribute("class", "card no-border");
store.setAttribute("id", doc.id);
store.innerHTML = `<div class="container1">
<img src="assets/images/image 209.png" alt="Avatar" class="right" style="width:100%;">
<p class="text-right">` + message + `</p>
<span class="time-right">` + time.getHours() + ":" + time.getMinutes() + `</span>
</div>`;
}
store_row.append(store);
document.getElementById("questions").innerHTML = store_row.innerHTML;
});
});
}