检查用户是否在 div 元素底部

Question

我在我的网站上有一个实时聊天的div，并且我添加了以下代码以使用户保持在聊天底部，甚至当新消息到来时也是如此： $("#chat-body").scrollTop($("#chat-body")[0].scrollHeight); 然而，问题是这样做会导致用户无法向上滚动，因为到第二秒钟结束时，它会将用户带到#chat-body的底部。我想在新消息到来时检查用户是否已经在#chat-body底部（即没有向上滚动），然后再将其带到底部。

请问如何实现？谢谢。

- MehranJ

---

能否在消息追加时添加此代码？例如，用户可以自由滚动上下，但当出现新消息时，此代码运行并使新消息立即进入视图？每秒运行一次似乎有些过度。如果有这段代码，仅此评论就会在我发布前触发div滚动10次。 - War10ck

就我个人而言，如果我作为用户在浏览旧消息时，由于新消息的到来而导致聊天被强制滚动到底部，那么当我试图阅读旧消息时，我会感到非常恼火。此时，我的阅读旧消息的自由已经被剥夺了。 - Taplar

同意Taplar的观点，如果用户向上滚动，他们正在寻找特定的消息以供参考。突然被带到底部会让人感到意外。不会追求这个方案。 - Joshua Robinson

@War10ck 但即使用户不想跳到底部并想查看以前的聊天记录，当他收到新消息时，它仍然会把用户带到页面底部。 - MehranJ

@taplar 是的。你说得对。 - MehranJ

Answer 1

你只需要获取元素的高度，并将其加到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就是这样做的：

- FiniteLooper

---

Discord 有一个类似的警报栏。 - Taplar