Question

我正在开发聊天系统。除非用户向上滚动，否则我需要滚动条保持在底部；如果用户向上滚动，则它们应停留在原处，除非用户向下滚动并重新锁定到滚动条中。我相信这被称为“粘性滚动”。

我编写的Javascript无法保存旧高度。控制台显示var oldHeight = (out.scrollHeight - out.clientHeight);时，应该可以正常工作。

我想知道是否有人知道更好的方法，或者是否有人知道var为什么不起作用。谢谢！

function my_function() {
  var out = document.getElementById("Mess2");
  var oldHeight = (out.scrollHeight - out.clientHeight);
  $('#Mess2').load("#Mess2" + ' #message_area');

  var isScrolledToBottom = (out.scrollHeight - out.clientHeight >= oldHeight) && (oldHeight <= out.scrollTop);

  console.log(oldHeight, out.scrollHeight - out.clientHeight, out.scrollTop);

  if (isScrolledToBottom)
    out.scrollTop = out.scrollHeight - out.clientHeight;
}

setInterval("my_function();", 1000);

Answer 1

如注释中所述，使用$("#chat").scrollTop($('#chat')[0].scrollHeight);进行滚动，应根据用户是否向上滚动来确定滚动的触发，如果用户滚动回底部，则再次启用滚动。

示例：

$(function() {
  var chatElm = $("#chat");

  // turn on/off scrolling
  var autoScroll = true;
  chatElm.scroll(function() {
    autoScroll = false;

    // if height == scroll pos enable scrolling (ie, at bottom)
    if (chatElm.scrollTop() + chatElm.height() === chatElm[0].scrollHeight) {
      autoScroll = true;
    }
  });

  // scroll to bottom of div
  function scrollToBottom() {
    chatElm.scrollTop(chatElm[0].scrollHeight);
  }

  var i = 0;
  setInterval(function() {
    i++;
    chatElm.append(i + '<br>');

    // to scroll or not to scroll
    !autoScroll || scrollToBottom();
  }, 300);
})

#chat {
  height: 100px;
  background: #ccc;
  overflow-y: auto
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="chat"></div>

Javascript滚动条Var无法正常工作

1 个答案: