UL 从底部开始滚动条消失答案

【问题标题】：Scroll bar disappear when UL start from bottomUL 从底部开始滚动条消失
【发布时间】：2017-03-24 18:33:31
【问题描述】：

我想让 Ul 项目从底部开始，当到达容器的高度时，滚动条就会出现。如果从顶部开始，它可以工作，但从底部开始会失败。

HTML

<div id="container">
<div class="big"></div>
<div class="parent">
    <ul>
        <li>Element #1</li>
        <li>Element #2</li>
        <li>Element #3</li>
        <li>Element #4</li>
        <li>Element #5</li>
        <li>Element #6</li>
        <li>Element #7</li>
        <li>Element #8</li>
        <li>Element #9</li>
    </ul>
</div>

CSS

.parent {
  background-color: gold;
  overflow-y: scroll;
}

#container ul {
  list-style: none;
  margin: 0;
  position: absolute;
  /*top: 31px; */
  left: 0;
  right: 0;
  bottom: 0;
}

#container {
  height: auto;
  display: -moz-box;
  display: -webkit-box;
  display: box;
}

#container div{
  position: relative;
  width: 200px;
  display: -moz-box;
  display: -webkit-box;
  display: box;
}

#container div.big{
  height: 100px;
  background-color: darkcyan;
}

有什么问题？

我想要实现的就像 Slack 或 Skype 聊天，聊天项目从底部开始向上移动，如果溢出，则显示滚动条。

【问题讨论】：

你应该看看我编辑的答案.. ;)

标签： css position css-position

【解决方案1】：

当一个元素 html 处于绝对位置并且固定在底部时，那么对于父级来说，它不会超过。这就是滚动不起作用的原因。

【讨论】：

【解决方案2】：

Javascript 可以像我在这里一样解决您的问题：

var big = document.getElementById("big"); // OR SET HEIGHT OF PARENT USING CSS
var parent = document.getElementById("parent");

parent.style.height = big.offsetHeight + 'px'; // OR SET HEIGHT OF PARENT USING CSS
parent.scrollTop = parent.scrollHeight;

工作示例：http://jsfiddle.net/4c4crfhb/7/

我还编辑了您的 CSS。看看小提琴；）

编辑：

这是一个向<UL> 添加新行并将滚动位置设置为底部的示例：http://jsfiddle.net/4c4crfhb/9/

【讨论】：

如果我想从容器底部开始“增长”“li”项，它不起作用。也就是说，就像 Slack 一样，当你开始打字时，它从底部开始并移动到顶部。 :)
它只是初始的...您必须构建一个函数，每次内容更改时都会调用该函数以将滚动位置设置为底部（也可能使用计时器）... ;) 每次您调用 'parent.scrollTop = parent.scrollHeight;' 滚动位置将设置为底部。 ;)
我已经编辑了我的答案。看看新的小提琴；）