将滚动保持在底部，除非用户更改滚动的位置

本文介绍了将滚动保持在底部，除非用户更改滚动的位置的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

几天前，我，对我来说工作完全正常。但现在我有一个新的要求。我想滚动条停留在我拿它的地方。例如，当页面加载时，如果我不触摸滚动条，则滚动条应保持在底部。但如果我触摸它，并采取它，那么它应该留在那里，不会自动下来。

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.

这是我有的代码：

<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">

编辑：我发布了下面的完整代码，显示邮件来自哪里，获得附加到什么div。

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>

有关发生了什么的信息：这是单向聊天系统（使用WebSockets），其中只有一方发送邮件。这是服务器端。所有的魔法发生在 function showGreeting（message）{..} 它正在创建元素和追加孩子，等等。我希望这可能没有什么帮助。
感谢

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

将滚动保持在底部

将滚动保持在底部，除非用户更改滚动的位置

问题描述

推荐答案