There is a usual list of ul, I want to learn how to scroll from the list, say, of 10 digits, only 4 are displayed, and the rest only if scrolled down will be displayed. I read about overflow: scroll - but somehow I asked and it turns out nonsense. Tell me how to do it or where to read about scrolling methods, I will be grateful.

 .for-ul { list-style-type: none; border: 1px solid red; } li {} a {} 
 <ul class="for-ul"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">6</a></li> <li><a href="#">7</a></li> <li><a href="#">8</a></li> <li><a href="#">9</a></li> <li><a href="#">10</a></li> </ul>

    1 answer 1

    1. Variant on pure CSS ( fixed height of list items ):

     .for-ul { list-style-type: none; border: 1px solid red; max-height: 120px; overflow-y: scroll } li { height: 30px; line-height: 30px; } a {} 
     <ul class="for-ul"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">6</a></li> <li><a href="#">7</a></li> <li><a href="#">8</a></li> <li><a href="#">9</a></li> <li><a href="#">10</a></li> </ul>

    1. Variant on JavaScript ( dynamic height of list elements ):

     var ul = document.querySelector('.for-ul'); var li = ul.querySelectorAll('li'); var height = 0; for (i = 0; i < 4; i++) { height = height + li[i].offsetHeight; console.log(height); } ul.style.maxHeight = height+'px'; 
     .for-ul { list-style-type: none; border: 1px solid red; overflow-y: scroll; width: 200px; } li { min-height: 30px; line-height: 30px; } a {} 
     <ul class="for-ul"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3 Π― Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Π΄Π»ΠΈΠ½Π½Π΅ Π΄Ρ€ΡƒΠ³ΠΈΡ… ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² списка</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">6</a></li> <li><a href="#">7</a></li> <li><a href="#">8</a></li> <li><a href="#">9</a></li> <li><a href="#">10</a></li> </ul>

    1. Option on jQuery ( dynamic height of list items ):

     var height = 0; $('.for-ul li').each(function() { if ($(this).index() < 4) { height = height + $(this).outerHeight(); console.log(height); } }); $('.for-ul').css('max-height', height + 'px'); 
     .for-ul { list-style-type: none; border: 1px solid red; overflow-y: scroll; width: 200px; } li { min-height: 30px; line-height: 30px; } a {} 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="for-ul"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3 Π― Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Π΄Π»ΠΈΠ½Π½Π΅ Π΄Ρ€ΡƒΠ³ΠΈΡ… ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² списка</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">6</a></li> <li><a href="#">7</a></li> <li><a href="#">8</a></li> <li><a href="#">9</a></li> <li><a href="#">10</a></li> </ul>