Question

我正在重复一些变量，而我最初使用的是 'scroll glue' ，它可以正常工作以保持滚动条粘在div的底部，即使添加了新消息也是如此。我也尝试使用vanilla JavaScript，它运行直到我添加了一个图像。我不知道为什么，但添加图像使得滚动开始在div的中间而不是停留在底部。

这是我的html，直到我添加<img>行：

<div scroll-glue id="testing">

  <ul>
     <li ng-repeat="message in messages"> 

        {{message.content}} 
        DATE: {{message.date}} 
        SENDER: {{message.sender.firstName}}

        <span>
          <img class="messageImage" src="{{message.sender.image}}" alt="">
        </span>
    </li>
  </ul>
</div>

这是我的CSS：

.messageImage {
  width: 100px;
}

#testing {
  background-color: blue;
  width: 300px;
  height: 300px;
  overflow-y: scroll;
}

当Scroll Glue没有工作时，我尝试过这个仍然没有用的JavaScript：

    var objDiv = document.getElementById('testing');
    console.log('this is objDiv', objDiv);
    objDiv.scrollTop = objDiv.scrollHeight;

我很难过！当我注释掉图像时，滚动将按预期粘在底部。重新添加它似乎从滚动的中间开始。

将图像添加到ngRepeat废墟中滚动胶水/滚动到DIV底部

0 个答案: