Using:

<div style="overflow-y: scroll;"> ... ... ... </div>

It turns out the standard scrolling (top to bottom), you can do the opposite, so that the content is displayed from bottom to top?

    1 answer 1

    It can be done so that when you load a page, your block automatically slips down. Here is the script for this:

     document.querySelector('.content> .content__item:last-child').scrollIntoView(true); 
     .wrap { height: 100px; overflow-y: scroll; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrap"> <div class="content"> <p class='content__item'>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</p> <p class='content__item'>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</p> <p class='content__item'>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</p> <p class='content__item'>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</p> <p class='content__item'>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</p> <p class='content__item'>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</p> <p class='content__item'>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</p> <p class='content__item'>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</p> <p class='content__item'>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</p> <p class='content__item'>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</p> <p class='content__item'>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</p> </div> </div>

    • I apologize, accidentally loaded jquery, it is not needed here. - Andrey Krupskii