Question

我有一个简单的聊天JS应用程序，div.chat-holder在整个窗口的窗格中保存所有聊天消息。我设置了＆＃39; .chat-holder的高度，因此它的大小保持固定，并允许滚动所有消息。

<style>
 .chat-holder {
     height: 30px;
     overflow-y: scroll;
 }
</style>
<div class="pane">
    <div class="chat-holder">
      <div class="chat-item">
         first msg
      </div>
      <div class="chat-item">
         second msg
      </div>
      ....
      <div class="chat-item">
         last msg
      </div>
    </div>
</div>

在页面加载时，我通过设置持有者的scrollTop滚动到底部：

var $holder = $('.chat-holder');
$holder.scrollTop($holder[0].scrollHeight);

这很好。

当我将div.pane设置为display:none时，会出现问题。理想情况下，我希望有一个单独的事件来显示/隐藏＆＃34;聊天窗格，并从隐藏的窗格开始。

隐藏父窗格时，.chat-holder scrollHeight为0，因此加载时，隐藏窗格不会滚动到底部。这意味着当显示窗格时，聊天不会滚动到最近的聊天。您可以在以下代码段中看到此信息：最初未显示.pane，滚动未设置。如果您将.pane设置为开始显示，则滚动正常。

无论如何都要＃34;滚动到底部＆＃34;父母被隐藏了吗？（是的，我知道我可以通过检测聊天持有人何时暴露出来然后滚动到底部来做到这一点，但我希望在加载时这样做。）

＆＃13;

$(function() {
   var $holder = $('.chat-holder');
   $holder.scrollTop($holder[0].scrollHeight);
   
   $('button').click(function() {
        $('.pane').toggleClass('active');
   });
});

＆＃13;

.chat-holder {
   height: 30px;
   overflow-y: scroll;
   border: thin solid black;
 }
 .chat-item {
   font-size: 20px;
 }
 
 .pane {
    display: none;
 }
 .pane.active {
    display: block;
 }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pane">
   <div class="chat-holder">
      <div class="chat-item">first msg</div>
      <div class="chat-item">second msg</div>
      <div class="chat-item">last msg</div>
   </div>
</div>

<button>Toggle pane</button>

＆＃13;

Answer 1

您可以获得广告素材，并使用opacity或visibility规则代替display: none：

＆＃13;

$(function() {
   var $holder = $('.chat-holder');
   $holder.scrollTop($holder[0].scrollHeight);
   
   $('button').click(function() {
        $('.pane').toggleClass('active');
   });
});

＆＃13;

.chat-holder {
   height: 30px;
   overflow-y: scroll;
   border: thin solid black;
 }
 .chat-item {
   font-size: 20px;
 }
 
 .pane {
    opacity: 0;
    position: absolute;
    z-index: 1;
 }
 .pane.active {
    opacity: 1;
    position: relative;
 }
 button {
  z-index: 2;
  position: relative;
 }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pane">
   <div class="chat-holder">
      <div class="chat-item">first msg</div>
      <div class="chat-item">second msg</div>
      <div class="chat-item">last msg</div>
   </div>
</div>

<button>Toggle pane</button>

＆＃13;

滚动到隐藏div的底部？

1 个答案: