아래에서 UL이 시작될 때 스크롤 막대가 사라집니다.

Question

Ul 항목이 맨 아래에서 시작하도록하고 컨테이너 높이에 도달하면 스크롤 막대가 나타납니다. 그것은 맨 위부터 시작하면 작동하지만 맨 아래에서는 실패합니다.

http://jsfiddle.net/4c4crfhb/3/

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

자바 스크립트는 문제를 해결할 수 :

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를 편집했습니다. 여기

바닥에 Parameters는 scrollPosition를 <UL> 새로운 라인을 추가하고 설정으로 한 예이다 : http://jsfiddle.net/4c4crfhb/9/

Answer 2

때 소자 HTML

EDIT) 바이올린 살펴 절대 위치에 있고 바닥에 고정 된 다음 부모에 대해 초과하지 않습니다. 이것이 스크롤이 작동하지 않는 이유입니다.