Question

我希望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聊天，聊天项从底部开始向上移动，如果溢出，则显示滚动条。

Answer 1

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

Answer 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>添加新行并将Scrollposition设置为底部的示例：http://jsfiddle.net/4c4crfhb/9/

UL从底部开始时，滚动条消失

2 个答案: