keep-overflow-div-scrolled-to-bottom-unless-user-scrolls-up

default overflow is scroll from top to bottom. transform: rotate(180deg) can make it scroll or load dynamic block from bottom to top.

by yeshen woo

HTML

<div class="cont"> 
 <ul>
   <li>0</li>
   <li>1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
   <li>5</li>
   <li>6</li>
   <li>7</li>
   <li>8</li>
   <li>9</li>
   <li>10</li>  
 </ul>
</div>

CSS

.cont {
height: 100px;
overflow-x: hidden;
overflow-y: auto;
transform: rotate(180deg);
direction: rtl;
text-align: left;
}

ul {
overflow: hidden;
transform: rotate(180deg);
}