Question

我有这段代码：

<div id="conversationDiv" style="overflow:auto">

    <label>What is your name?</label><input type="text" id="name" />
    <button id="sendName" onclick="sendName();updateScroll();">Send</button>
    <p id="response"></p>

</div>

我有这个javascript函数，我点击'发送'按钮后运行它，并在1秒间隔后继续运行。

<script type="text/javascript">
function updateScroll() {
        setInterval(function(){ var element = document.getElementById("conversationDiv");
        element.scrollTop = element.scrollHeight; }, 1000);
    }
</script>

这是我的sendName（）函数，如果有人想看到：

function sendName() {
        var name = document.getElementById('name').value;
        stompClient.send("/app/hello", {}, JSON.stringify({ 'name': name }));
    }

但问题是，我的滚动条从不在底部。

我正在运行Websocket连接并且信息不断出现，当信息足以让滚动条出现时，我不希望它上升。我希望它保持在底部，除非用户向后滚动他/她自己。我不知道为什么我的代码不起作用。任何帮助表示赞赏。感谢

Answer 1

您正在使用setInterval()设置计时器。将代码更改为：

function updateScroll() {
  var element = document.getElementById("conversationDiv");
  element.scrollTop = element.scrollHeight;
}

或者只在document的{{1}}事件中添加一个简单的代码：

ready

除非我自己向上滚动...

好的，这是一个棘手的问题。您可以考虑在计时器中添加setInterval(function() { var element = document.getElementById("conversationDiv"); element.scrollTop = element.scrollHeight; }, 1000);，这样当在顶部方向滚动时，您可以清除计时器。

完整代码......

flag

$(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);
  setInterval(function() {
    var element = document.getElementById("conversationDiv");
    element.scrollTop = element.scrollHeight;
  }, 500);
});

* {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;}

无法将滚动条保持在底部

1 个答案: