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);
}

JavaScript

$('.cont').on('mousewheel DOMMouseScroll', function(e) {
    e.preventDefault();
    let value = e.originalEvent.wheelDelta || -e.originalEvent.detail;
    let delta = Math.max(-1, Math.min(1, value));
    let decoration = delta > 0 ? 'Up' : 'down';
    $(document).scrollTop($('.cont').scrollTop() + 50 * delta);
});