Question

几天前我asked当新数据出现时，如何让我的滚动条保持在底部。我得到了this answer，对我来说非常好。但现在我有了新的要求。我希望滚动条留在我拿它的地方。例如，当页面加载时，如果我没有触摸滚动条，则滚动条应保留在底部。但是，如果我触摸并拿起它，那么它应该留在那里而不是自动降下来。

这是我的代码：

<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的位置。

<!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），其中只有一方发送消息。那是服务器端。所有的魔力都发生在功能showGreeting（message）{..} 中，它正在创建元素和追加孩子等等。我希望这可能没什么帮助。感谢

Answer 1

为此您可能需要一个标志。所以我正在做的是：

当触发滚动事件时（即使在追加时被触发），我们需要检查滚动部分是否在最后。
如果没有结束，我们需要清除间隔。
如果结束，请重新初始化间隔。

不确定为什么它不起作用。我有我在这里工作的剧本。

＆＃13;

$(function () {
  var count = 1;
  setInterval(function () {
    $("#conversationDiv").append('<p>Message #' + count++ + ': Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium repudiandae doloribus unde, repellat maiores minus fuga earum esse, ab, aperiam voluptatibus est dolorem placeat perferendis omnis libero dolore alias quasi!</p>');
  }, 1000);
  var scr = setInterval(function() {
    var element = document.getElementById("conversationDiv");
    element.scrollTop = element.scrollHeight;
  }, 500);
  $("#conversationDiv").scroll(function () {
    var element = document.getElementById("conversationDiv");
    if ((Number(element.scrollTop) + Number($(element).height())) != (Number(element.scrollHeight)))
      clearInterval(scr);
    else
      if (element.scrollTop < element.scrollHeight)
      scr = setInterval(function() {
        var element = document.getElementById("conversationDiv");
        element.scrollTop = element.scrollHeight;
      }, 500);
  });
});

＆＃13;

* {font-family: 'Segoe UI'; margin: 0; padding: 0; list-style: none;}

#conversationDiv {height: 350px; overflow: auto; border: 1px solid #ccc;}
#conversationDiv p {margin: 5px 5px 10px; padding: 5px; border: 1px solid #ccc; background-color: #f5f5f5;}

＆＃13;

<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<div id="conversationDiv">
  
</div>

＆＃13;

看起来缺少某些东西。我几乎靠近它。如果Number(element.scrollTop)，Number($(element).height())，Number(element.scrollHeight)区域内存在某些内容。

Answer 2

你可以弄清楚你是否像这样滚动到底部

var isScrolled = (element.scrollHeight - element.scrollTop === element.clientHeight);

然后：

if (isScrolled) { 
   //code here to move scrollbar down
}

https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight

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

2 个答案: