Question

我有一个聊天框，人们可以在其中添加自己的消息但我的问题是，当添加新消息时，它不会向下滚动以显示新消息。我通过使用此代码修复此问题

exports.add_name = function (req, res) {
    const newName = new Name(req.body);
    console.log(newName); //this prints
    newName.save(function (err, name) {
        console.log(name); //this doesnt print
        console.log(err); //this also doesnt print
        if (err)
            res.send(err);
        res.json(name);
    });
};

（panel-body是我的滚动div的类）

但问题在于，如果用户想要在之前的消息中向后滚动，则他或她将被强制退回到底部。当用户滚动时停止“自动滚动”的最佳方式是什么，但是当用户向下滚动或仅加载页面时它将再次启动。

 $('.panel-body').scrollTop($('.panel-body').height()*$('.panel-body').height());

这是我已经创建的addMsg函数

Answer 1

我在这里快速尝试了。

从height()（JS）中减去元素＆lt; scrollHeight（jQuery）并将其与用户的scrollTop（jQuery滚动位置）进行比较，我们可以确定在新消息出现之前我们当前是否位于可滚动容器的底部。

如果我们位于底部，请通过设置新的scrollTop让用户远离用户。否则，不要改变任何事情。希望这有帮助！

现场演示：

＆＃13;

function newMsg() {
  // FOR DEMO (naming each message)
  var count = $('.msg').length;

  // shouldScroll will be true if we're at the bottom of the
  // scrollable container before the new message appears
  var $panel = $('.panel-body');
  var shouldScroll = $panel[0].scrollHeight - $panel.height() <= $panel.scrollTop(); 

  // this is where you append a new message to the container
  $panel.append('<div class="msg">Message ' + count + '</div>');

  // if we were at the bottom before the new message,
  // then scroll to the new bottom of the container
  if (shouldScroll) {
    $panel.scrollTop($panel[0].scrollHeight);
  }
}

// FOR DEMO (new message every .5 seconds)
setInterval(newMsg, 500);

＆＃13;

.panel-body {
  border: 1px solid #000;
  overflow: auto;
  width: 200px;
  height: 200px;
}

.msg {
  border-bottom: 1px solid #ccc;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="panel-body"></div>

＆＃13;

自动向下滚动但在用户滚动时停止

1 个答案: