Установите навигационную панель для списка

Question

Я создаю список с большим количеством элементов внутри него, используя следующий код.

<ul class="custom-list"> 
         <li class="item" *ngFor="let follower of followers"> 
          <comment [username]=follower.from.username [comment]=follower.text [imageURI]=follower.from.profile_picture></comment> 
         </li> 
        </ul> 

Проблема заключается в том, я не хочу, чтобы расширить всю страницу из числа <li> тегов. Вместо этого я не должен держать всю высоту списка как height=500px;, и вместо этого мне нужно иметь ползунок в моем списке. Так как я могу это сделать?

Я попытался это:

style="height:500px; overflow:hidden; overflow-y:scroll;" 

но исчезает мои <li> теги

Answer 1

.item_list 
 
{ 
 
height:100px; 
 
    overflow-x:hidden; 
 
    overflow-y:auto 
 
}

<ul class="item_list"> 
 
    <li class="item" >vivek</li> 
 
    <li class="item" >vivek</li> 
 
    <li class="item" >vivek</li> 
 
    <li class="item" >vivek</li> 
 
    <li class="item" >vivek</li> 
 
    <li class="item" >vivek</li> 
 
    <li class="item" >vivek</li> 
 
    <li class="item" >vivek</li> 
 
    <li class="item" >vivek</li> 
 
    <li class="item" >vivek</li> 
 
    <li class="item" >vivek</li> 
 
    <li class="item" >vivek</li> 
 
    <li class="item" >vivek</li> 
 
    <li class="item" >vivek</li> 
 
    <li class="item" >vivek</li> 
 
    <li class="item" >vivek</li> 
 
    <li class="item" >vivek</li> 
 
    <li class="item" >vivek</li> 
 
    <li class="item" >vivek</li> 
 
    <li class="item" >vivek</li> 
 
    <li class="item" >vivek</li> 
 
    <li class="item" >vivek</li> 
 
    <li class="item" >vivek</li> 
 
    <li class="item" >vivek</li> 
 
    <li class="item" >vivek</li> 
 
    <li class="item" >vivek</li> 
 
    <li class="item" >vivek</li> 
 
    <li class="item" >vivek</li> 
 
    <li class="item" >vivek</li> 
 
    <li class="item" >vivek</li> 
 
    <li class="item" >vivek</li> 
 
    <li class="item" >vivek</li> 
 
    <li class="item" >vivek</li> 
 
    <li class="item" >vivek</li> 
 
    <li class="item" >vivek</li> 
 
    <li class="item" >vivek</li> 
 
</ul>

Вы можете попробовать этот CSS

Answer 2

ли вам что-нибудь подобное? Просто overflow-y:scroll; (Открыть фрагмент в полную страницу, чтобы увидеть его правильно)

.custom-list{ 
 
    height:500px; 
 
    overflow-y:scroll; 
 
}

<ul class="custom-list"> 
 
    <li class="item" >Test</li> 
 
    <li class="item" >Test</li> 
 
    <li class="item" >Test</li> 
 
    <li class="item" >Test</li> 
 
    <li class="item" >Test</li> 
 
    <li class="item" >Test</li> 
 
    <li class="item" >Test</li> 
 
    <li class="item" >Test</li> 
 
    <li class="item" >Test</li> 
 
    <li class="item" >Test</li> 
 
    <li class="item" >Test</li> 
 
    <li class="item" >Test</li> 
 
    <li class="item" >Test</li> 
 
    <li class="item" >Test</li> 
 
    <li class="item" >Test</li> 
 
    <li class="item" >Test</li> 
 
    <li class="item" >Test</li> 
 
    <li class="item" >Test</li> 
 
    <li class="item" >Test</li> 
 
    <li class="item" >Test</li> 
 
    <li class="item" >Test</li> 
 
    <li class="item" >Test</li> 
 
    <li class="item" >Test</li> 
 
    <li class="item" >Test</li> 
 
    <li class="item" >Test</li> 
 
    <li class="item" >Test</li> 
 
    <li class="item" >Test</li> 
 
    <li class="item" >Test</li> 
 
    <li class="item" >Test</li> 
 
    <li class="item" >Test</li> 
 
    <li class="item" >Test</li> 
 
</ul>

Answer 3

Попробуйте использовать следующий код

HTML

<ul class="custom-list"> 
    <li>Username</li> 
    <li>Username</li> 
    <li>Username</li> 
    <li>Username</li> 
    <li>Username</li> 
    <li>Username</li> 
    <li>Username</li> 
    <li>Username</li> 
    <li>Username</li> 
    <li>Username</li> 
    <li>Username</li> 
    <li>Username</li> 
    <li>Username</li> 
    <li>Username</li> 
    <li>Username</li> 
    <li>Username</li> 
    <li>Username</li> 
    <li>Username</li> 
    <li>Username</li> 
    <li>Username</li> 
    <li>Username</li> 
    <li>Username</li> 
    <li>Username</li> 
    <li>Username</li> 
    <li>Username</li> 
    <li>Username</li> 
    <li>Username</li> 
    <li>Username</li> 
    <li>Username</li> 
    <li>Username</li> 
    <li>Username</li> 
    <li>Username</li> 
    <li>Username</li> 
    <li>Username</li> 
</ul> 

CSS

.custom-list { 
    max-height: 500px; 
    overflow: hidden; 
    overflow-y: scroll; 
    display: block; 
}