粘滞列表不显示滚动条

Posted 2023-03-06

【中文标题】粘滞列表不显示滚动条

【英文标题】：Sticky list is not showing the scrollbar

【发布时间】：2022-01-22 19:40:39

【问题描述】：

我创建了一个粘性列表，但是在添加更多内容后，没有滚动条出现，因此列表被剪裁了。我该如何解决这个问题？我添加了样式以及标记（仅显示一个列表元素，但 ul 中有 30 多个列表项）

.list 
  position: -webkit-sticky;
  position: sticky;
  top: 5rem;
  height: -webkit-max-content;
  height: -moz-max-content;
  height: max-content

<div class="list">
  <h2>
    <button>
         <span>List</span>
        </button>
  </h2>
  <section class="list-links">
    <ul>
      <li>
        <a>
              List
            </a>
      </li>
      <li>
    </ul>
  </section>
</div>

【参考方案1】：

我猜你想让标题变粘并且用户向下滚动列表但保持标题不变，那么代码应该是这样的：

.list 
  height: 100px
  position: relative;

.sticky 
  position: sticky;
  top: 0;

<div class="list">
  <h2 class="sticky">
    <button>
         <span>List</span>
        </button>
  </h2>
  <section class="list-links">
    <ul>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
    </ul>
  </section>
</div>

请注意，postition: sticky; 内容位于具有“位置”的元素内。