https://i.sstatic.net/6iBof.png
I am currently troubleshooting an issue with my chat thread.
At the moment, the chat window automatically scrolls up when it reaches the bottom of the page to ensure it is always visible. However, there is a problem where it hides behind the form before reaching the actual bottom of the page. Therefore, I need to redefine what constitutes the bottom of my page:
I have attempted the following solution:
function scroll() {
window.scrollTo(0, document.body.scrollHeight + document.getElementById('form_id').offsetHeight);
};
Unfortunately, it seems that this function has no effect due to the listener function preceding it.
Below is the remaining code for reference:
<html>
<head>
<title>Chat Demo</title>
[<!-- styles and other HTML elements omitted for brevity -->]
</head>
<body>
<section class="module">
<div id="wrapper">
<div id="header">
<header class="top-bar">
<h1>Chat Demo</h1>
</header>
</div>
<div id="content">
<ol id="messages"></ol>
</div>
<div id="footer">
<form id="form_id" action = "#">
<input id = "user_input"/>
<button id="btn_id">send</button>
</form>
</div>
</div>
</section>
[<!-- JavaScript scripts and dependencies added here -->]
</body>
</html>