无法保持底部的滚动条 [英] Cannot Keep Scroll Bar at Bottom

问题描述

我有这样的代码：

 < div id =conversationDivstyle =overflow：auto> 
 
< label>你叫什么名字？< / label>< input type =textid =name/> 
< button id =sendNameonclick =sendName（）; updateScroll（）;>发送< / 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（）函数，如果有人想看：

 函数sendName（）{
 var name = document.getElementById（'name'）。value; 
 stompClient.send（/ app / hello，{}，JSON.stringify（{'name'：name}））; 
} 
  

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

我正在运行一个Websocket连接，并且信息不断出现，当信息足以让滚动条出现时，我不希望它上升。我希望它保持在底部，除非用户自己滚动备份。我不知道为什么我的代码无法正常工作。任何帮助表示赞赏。感谢您使用 setInterval（）来设置一个计时器。 请将您的代码更改为：

  function updateScroll（）{
 var element = document.getElementById（conversationDiv） ; 
 element.scrollTop = element.scrollHeight; 
} 
  

或者只需在 document code $'$ 准备好事件：

$ p $ setInterval（function （）{
var element = document.getElementById（conversationDiv）;
element.scrollTop = element.scrollHeight;
}，1000）;


除非我自己上卷...

好的，这是棘手的问题。您可以考虑在计时器中添加一个标记，这样当滚动向上时，您可以清除计时器。

$

$（function（）{var count = 1 ; setInterval（function（）{$（＃conversationDiv）。append（'< p> Message＃'+ count ++ +'：Lorem ipsum dolor sit amet，consectetur adipisicing elit.Plaesentium repudiandae doloribus unde，repellat maiores minus fuga earum < / p>'）;}，1000）; setInterval（function（）{var element = document.getElementById（conversationDiv）; element.scrollTop = element.scrollHeight;}，500）;}）;

* {font-family：'Segoe UI';保证金：0;填充：0; list-style：none;}＃conversationDiv {height：350px;溢出：自动; border：1px solid #ccc;}＃conversationDiv p {margin：5px 5px 10px;填充：5px; border：1px solid #ccc; background-color：＃f5f5f5;}

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

I have this code:

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

And I have this javascript function which I run after I click on 'Send' button and it keeps running after 1 second interval.

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

This is my sendName() function if anyone wants to see:

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

But the problem is, my scroll bar is never at the bottom.

I am running a Websocket connection and the information keeps coming and coming and when information is enough for scroll bar to appear, I don't want it to go up. I would like it to stay at bottom unless a user scrolls back up him/herself. I don't know why my code is not working. Any help is appreciated. Thanks

解决方案

You are setting a timer using setInterval(). Either change your code to:

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

Or just add one simple code in document's ready event:

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

Unless I myself scroll up...

Okay, here's the tricky bit. You might consider adding a flag to the timer, so that when the scroll is made on the top direction, you can clear the timer.

The full code...

$(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;}

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

这篇关于无法保持底部的滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！