Javascript 滚动到隐藏div的底部？

我有一个简单的聊天JS应用程序，有一个

div.chat-holder

在整个窗口的一个窗格中保存所有聊天信息。我将“

.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>

这个很好用

当我从

div.pane

设置为

display:none

开始时出现问题。理想情况下，我希望有一个单独的事件来“显示/隐藏”聊天窗格，并从隐藏窗格开始

当父窗格隐藏时，

.chat holder

滚动高度为0，因此加载时，隐藏窗格不会滚动到底部。这意味着当显示窗格时，聊天不会滚动到最近的聊天。您可以在以下代码段中看到这一点：如果最初未显示

.pane

，则未设置滚动。如果将

.pane

设置为开始显示，则滚动正常

当父对象被隐藏时，是否仍然可以“滚动到底”呢？（是的，我知道我可以通过检测聊天室持有者何时暴露来做到这一点&然后滚动到底部，但我希望在加载时这样做。）

$（函数（）{
变量$holder=$（'.chat holder'）；
$holder.scrollTop（$holder[0].scrollHeight）；
$（“按钮”）。单击（函数（）{
$（'.pane'）.toggleClass（'active'）；
});
});
.chat holder{
高度：30px；
溢出y：滚动；
边框：薄而实的黑色；
}
.聊天项目{
字体大小：20px；
}
.窗格{
显示：无；
}
.pane.active{
显示：块；
}

第一味精
第二味精
末味精
切换窗格
您可以发挥创意，使用
不透明度
或
可见性
规则代替
显示：无
：


$（函数（）{
变量$holder=$（'.chat holder'）；
$holder.scrollTop（$holder[0].scrollHeight）；
$（“按钮”）。单击（函数（）{
$（'.pane'）.toggleClass（'active'）；
});
});
.chat holder{
高度：30px；
溢出y：滚动；
边框：薄而实的黑色；
}
.聊天项目{
字体大小：20px；
}
.窗格{
不透明度：0；
位置：绝对位置；
z指数：1；
}
.pane.active{
不透明度：1；
位置：相对位置；
}
钮扣{
z指数：2；
位置：相对位置；
}

第一味精
第二味精
末味精
切换窗格
display:none是问题所在，因为这将使元素从DOM中“删除”，所以当您引用它时，它就像不存在一样。我建议使用高度：0；溢出：隐藏；或不透明度：0；如果你想得到它的位置。如果需要保持display:none，可以在页面通过javascript加载后应用该样式。因此，您将获得加载时的位置，然后应用display:none。根据需要工作。非常感谢。一个改进是在
div.pane
中添加CSS
visibility
和不透明。通过使窗格最初不可见（可见性：hidden），它仍然可以正确地计算滚动，但是——不可见——不会混淆可访问性阅读器（和alt tab），后者可以“看到”透明字段，但不能“看到”不可见字段。
var $holder = $('.chat-holder');
$holder.scrollTop($holder[0].scrollHeight);