滚动到隐藏div的底部？

Question

滚动到隐藏div的底部？

3

我有一个简单的聊天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>

在页面加载时，我通过设置容器的scrollTop来滚动到底部：

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

当我以 display:none 设置 div.pane 开始时，问题就出现了。理想情况下，我希望有一个单独的事件来 "显示/隐藏" 聊天窗格，并以隐藏的状态开始。

当父级窗格被隐藏时，.chat-holder 的 scrollHeight 为0，因此在加载时，隐藏的窗格不会滚动到底部。这意味着当窗格被显示时，聊天记录没有被滚动到最近的聊天记录。您可以在以下代码片段中看到这一点：初始时未显示 .pane ，因此无法设置滚动。如果将 .pane 设置为一开始就显示，那么滚动就可以正常工作。

是否有办法在父级窗格隐藏时 "滚动到底部"？（是的，我知道我可以通过检测何时暴露出聊天室，然后滚动到底部来实现此目的，但我想在加载时这样做。）

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

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

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

- pbuck

2

display: none 是问题所在，因为它会使元素从 DOM 中“移除”，所以当您引用它时，就好像它不存在一样。如果您想要获取其位置，我建议使用 height: 0; overflow: hidden; 或 opacity: 0;。如果您需要保持 display: none，则可以通过 JavaScript 在页面加载后应用该样式。因此，您可以在加载时获取位置，然后应用 display: none。 - Cat

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Chase DeAnda · Accepted Answer

您可以发挥创意，使用opacity或visibility规则代替display: none：

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

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

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