Material Design - 列表组件的二级滚动条

【问题标题】：Material Design - Secondary Scroll Bar for List ComponentMaterial Design - 列表组件的二级滚动条
【发布时间】：2018-10-16 18:33:19
【问题描述】：

在我的项目中，我使用的是来自谷歌材料设计网站的代码：https://material.io/components/web/catalog/lists/

它工作得很好，但是，随着更多列表条目的添加，我必须向下滚动才能看到它们。问题是要滚动列表，我要滚动过去我的页眉。

我在问是否有人知道如何添加一个“辅助滚动条”（我不知道你怎么称呼它们），它在使用时只会滚动列表。

我想要实现的一个例子在这里：https://stackoverflow.com/a/21998914/8625593

提前致谢！

【问题讨论】：

你在问如何设计它？
好吧，我宁愿使用 CSS，而不是 Javascript 来添加自定义滚动条，但如果需要，我很乐意使用 Javascript
稍后，我希望有一个自定义滚动条，以匹配材料设计的外观

标签： html css material-design

【解决方案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>

【讨论】：

另外我将如何创建自定义滚动条？