Дизайн материала - вторичная полоса прокрутки для компонента списка

Question

В моем проекте я использую код с сайта дизайна материалов Google: https://material.io/components/web/catalog/lists/

Тем не менее, он работает отлично, так как по мере добавления новых записей в списке мне приходится прокручивать страницу вниз, чтобы увидеть их. Проблема в том, что для прокрутки списка я прокручиваю заголовок своей страницы.

Я спрашиваю, знает ли кто-нибудь, как добавить «вторичную полосу прокрутки» (я не знаю, как вы их называете), которая при использовании только прокручивает список.

Пример того, чего я пытаюсь достичь, приведен здесь: https://stackoverflow.com/a/21998914/8625593

Заранее спасибо!

Answer 1

Ограничить высоту в списке контейнера. Это приведет к отображению полосы прокрутки или добавлению полосы прокрутки по вертикали со свойством over-flow-y.

Например:

#listContainer{
  max-height:200px; 
  width:18%;
  overflow:hidden;
  overflow-y:scroll;
}

#container {
  overflow-y:scroll
}

<div>
  <h1>Headline</h1>
  <div id="container">
    <ul id="listContainer">
      <li>Link 1</li>
      <li>Link 2</li>
      <li>Link 3</li>
      <li>Link 4</li>
      <li>Link 5</li>
      <li>Link 6</li> 
      <li>Link 7</li> 
      <li>Link 8</li>
      <li>Link 9</li>
      <li>Link 10</li>
      <li>Link 11</li>
      <li>Link 12</li>
      <li>Link 13</li>
      <li>Link 14</li>
      <li>Link 15</li>
      <li>Link 16</li>
      <li>Link 17</li>
      <li>Link 18</li>
      <li>Link 19</li>
      <li>Link 20</li>
    </ul>
  </div>

  <div>Possible Summary Information</div>
</div>