Question

我正在构建一个聊天应用程序。我一直试图将滚动盘置于始终指向底部的模式中，除非我向上滚动，但无法做到这一点。列表元素通过ajax提供。有人可以帮助我吗？与此。

    <div class="modal-body" style="max-height: calc(50vh - 100px);
overflow-y: auto;">
    <ul class="list-group">
    </ul>

    </div>

Answer 1

您可以使用jQuery .scrollTop方法来实现。

检查下面的示例代码段

$(document).ready(function() {
    $(".modal-body").scrollTop(100);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal-body" style="max-height: calc(50vh - 100px);
overflow-y: auto;">
    <ul class="list-group">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li>10</li>
    </ul>
</div>

Answer 2

定义一个变量，以决定是否在收到消息时滚动到底部。

这是一个简化的示例。

看看这就是您要寻找的东西。

var stick_bottom = true;

var t = setInterval(function() {
  got_new_message();
}, 1000);

$('.messages-container').on('scroll', function() {
  stick_bottom = ($(this).scrollTop() + $(this).height() >= $('ul.message-list').height());
});

function got_new_message() {
  var newDate = new Date();
  $('ul.message-list').append('<li class="message">This is a new message. ('+Date.now()+')</li>');
  if (stick_bottom) {
    $('.messages-container').scrollTop($('ul.message-list').height());
  }
}

.messages-container {
  height: 140px;
  overflow-y: scroll;
  background-color: #eee;
}
ul.message-list {
  padding: 0;
  margin: 0;
}
ul.message-list li.message {
  padding: 5px 0 0 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="messages-container">
  <ul class="message-list">
    <li class="message">Hello there!</li>
  </ul>
</div>

如何将模式指向底部的滚动面板

2 个答案: