检查用户是否在div的底部

时间:2019-03-07 21:49:42

标签: javascript jquery

我的网站上有一个实时聊天div,我添加了这段代码,以每1000ms的间隔运行,因此即使收到新消息,用户也将停留在聊天的底部:

$("#chat-body").scrollTop($("#chat-body")[0].scrollHeight);

但是,问题是这样一来,用户将无法向上滚动,因为在第二秒结束时,无论如何它将使用户到达#chat-body的底部。我希望它检查用户是否已经在#chat-body的底部(即没有向上滚动),然后在收到新消息时将其带到底部。

我该怎么做?谢谢。

1 个答案:

答案 0 :(得分:3)

您只需要获取元素的高度,然后将其添加到scrollTop中即可。如果该数字是>= scrollHeight,那么您将排在最后!

$(function() {
  var $scroller = $("#scroller");
  var height = $scroller.height();
  var $output = $("#output");

  $scroller.on("scroll", function(event){
    var txt = "height: " + height
            + "\nscrollHeight: " + this.scrollHeight
            + "\nscrollTop: " + this.scrollTop
            + "\nCalculated Bottom: " + (this.scrollTop + height);

    if(this.scrollTop + height >= this.scrollHeight){
      txt += "\n!!!At the bottom!!!"
    }
    $output.text(txt);
  });
});
#scroller {
  border: 1px solid #CCC;
  overflow: auto;
  height: 100px;
  width: 50%;
}
#scroller p { padding: 10px; margin: 0; }
#scroller p:nth-child(even) { background-color: #EEE; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="scroller">
 <p>a message</p>
 <p>another message</p>
 <p>a message</p>
 <p>another message</p>
 <p>a message</p>
 <p>another message</p>
 <p>a message</p>
 <p>another message</p>
 <p>a message</p>
 <p>another message</p>
</div>

<pre id="output"></pre>

我建议不要每隔1000毫秒运行一次“将我滚动到底部”代码,而是在出现新消息时&&滚动到底部,而您已经在底部。

此外,当不在底部且出现新消息时,可能显示某种指示,表明下面有新的未见消息。 Slack就是这样:

enter image description here