Faraz Durrani Faraz Durrani - 1 month ago 11
CSS Question

Keep the scroll at the bottom unless user changes the position of the scroll

A few days ago I asked how can I keep my scroll bar at the bottom when new data comes in. I got this answer which worked perfectly fine for me. But now I have a new requirement. I want the scroll bar to stay where I take it. For example, when the page loads and if I don't touch the scroll bar, then the scroll bar should remain at the bottom. But if I touch it and take it up, then it should stay there and not come down automatically.

This is the code I have:

<style>
#conversationDiv {
height: 900px;
overflow: auto;
}
</style>

<script>
$(function () {
setInterval(function() {
var element = document.getElementById("conversationDiv");
element.scrollTop = element.scrollHeight;
}, 0);
});
</script>


<div id="conversationDiv">


EDIT: I am posting the full code below which shows where the messages are coming from and where they are getting appended to what div.

<!DOCTYPE html>
<html>
<head>
<title>Hello WebSocket</title>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/sockjs-client/1.1.0/sockjs.js"> </script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/stomp.js/2.3.3/stomp.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<style>
#conversationDiv {
height: 900px;
}
</style>
<script>
$(function () {
setInterval(function() {
var element = document.getElementById("conversationDiv");
element.scrollTop = element.scrollHeight;
}, 0);
});
</script>
<script type="text/javascript">
var stompClient = null;
function setConnected(connected) {
document.getElementById('connect').disabled = connected;
document.getElementById('disconnect').disabled = !connected;
document.getElementById('conversationDiv').style.visibility = connected ? 'visible' : 'hidden';
document.getElementById('response').innerHTML = '';
}

function connect() {
var socket = new SockJS("http://twitchbot-farazdurrani.rhcloud.com:8000/hello/");
stompClient = Stomp.over(socket);
stompClient.connect({}, function(frame) {
setConnected(true);
console.log('Connected: ' + frame);
stompClient.subscribe("/topic/greetings", function(greeting){
showGreeting(greeting.body);
});
});
}

function disconnect() {
if (stompClient != null) {
stompClient.disconnect();
}
setConnected(false);
console.log("Disconnected");
}

function sendName() { //I am not sending anything so remove this..
var name = document.getElementById('name').value;
stompClient.send("/app/hello", {}, JSON.stringify({ 'name': name }));
}

function showGreeting(message) {
var response = document.getElementById('response');
var p = document.createElement('p');
p.style.wordWrap = 'break-word';
p.appendChild(document.createTextNode(message));
response.appendChild(p);
}
</script>
</head>
<body onload="connect()">
<div>
<div>
<button id="connect" onclick="connect();">Connect</button>
<button id="disconnect" disabled="disabled" onclick="disconnect();">Disconnect</button>
</div>
<div id="conversationDiv" style="overflow:auto">
<p id="response"></p>
</div>
</div>





A little info on what's going on: It is a one way chat system (Using WebSockets) where only one side send messages. That is server side. All the magic is happening in function showGreeting(message) {..} where it is creating elements and appending child, etc. I hope this could be of little help.
Thanks

Answer

Okay I am back! This is how I did it (after 5 months?).

So I got help from this answer. But I modified it of course according to my need.

So my method

function showGreeting(message) {
    var response = document.getElementById('response');
    var p = document.createElement('p');
    p.style.wordWrap = 'break-word';
    p.appendChild(document.createTextNode(message));
    response.appendChild(p);
}   

was adding content to the page. More specifically, it was adding content to this <p id="response"></p>. So I matched my method and my <div id="conversationDiv"> (this div contains that <p ..> </p>) where content was added) to the the answer given by @dotnetCarpenter here.

Here is the answer:

  function showGreeting(message) {
        var out = document.getElementById('conversationDiv');
        var add = setInterval(function() {
        var isScrolledToBottom = out.scrollHeight - out.clientHeight <= out.scrollTop + 1;  
        var newElement = document.createElement("div");            
        newElement.innerHTML = message;
        out.appendChild(newElement);
        if(isScrolledToBottom){
            out.scrollTop = out.scrollHeight - out.clientHeight;
        }
      }, 1000);            
    }

and my div:

<div id="conversationDiv" style="overflow:auto">            
    <!-- <p id="response"></p> --> //removed <p..> </p> basically   
</div>

I hope this helps someone. Thanks