html - 如何使用溢出自动阻止第一个 li 在 ul li 列表中滚动？

Question

我制作了简单的 ul li 列表，其中 ul 具有特定的 max-height 和 overflow: auto 以便在有长列表可用时它可以滚动。但我正在尝试修复第一个 li 并想滚动所有其他 li。

.account-selector__listing.dropdown.is-open {
  margin-bottom: 2rem;
  position: relative;
  max-height: 22rem;
  overflow: auto;
}

<ul class="account-selector__listing ng-scope dropdown is-open">
  <li class="account-selector__item ng-scope active dropdown">
    //want to fix this li and dont want to scroll this
  </li>
  <li class="account-selector__item ng-scope active dropdown">
    //some content
  </li>
  <li class="account-selector__item ng-scope active dropdown">
    //should scroll
  </li>
  <li class="account-selector__item ng-scope active dropdown">
    //should scroll
  </li>
  <li class="account-selector__item ng-scope active dropdown">
    //should scroll
  </li>
  <li class="account-selector__item ng-scope active dropdown">
    //should scroll
  </li>
</ul>

CSS 中有什么可以修复第一个 li 并可以垂直滚动所有其他内容吗？像这样

Answer 1

如果您在 ul 周围创建一个容器元素，您可以使用 position 实现此效果。

• 将容器元素设置为 position: relative 并为其提供顶部填充。
• 将li:first-child设置为position: absolute
• 将 ul 设置为 position: static 以便 li:first-child 从容器元素而不是 获取其定位>ul

.ulOuter {
  position: relative;
  padding-top: 10px;
}

.account-selector__listing.dropdown.is-open {
    margin-bottom: 2rem;
    max-height: 120px;
    overflow: auto;
    position: static;
    box-shadow: 0 0 3px inset #eeeeee;
}

.account-selector__listing.dropdown.is-open li:first-child {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

<div class="ulOuter">
<ul class="account-selector__listing ng-scope dropdown is-open" >
           <li class="account-selector__item ng-scope active dropdown">
                //want to fix this li and dont want to scroll this
 </li>
           <li class="account-selector__item ng-scope active dropdown">
                //some content 
 </li>
           <li class="account-selector__item ng-scope active dropdown">
                //should scroll 
 </li>
           <li class="account-selector__item ng-scope active dropdown">
                //should scroll 
 </li>
           <li class="account-selector__item ng-scope active dropdown">
                //should scroll 
 </li>
           <li class="account-selector__item ng-scope active dropdown">
                //should scroll 
 </li>
           <li class="account-selector__item ng-scope active dropdown">
                //should scroll 
 </li>
           <li class="account-selector__item ng-scope active dropdown">
                //should scroll 
 </li>
           <li class="account-selector__item ng-scope active dropdown">
                //should scroll 
 </li>
           <li class="account-selector__item ng-scope active dropdown">
                //should scroll 
 </li>
           <li class="account-selector__item ng-scope active dropdown">
                //should scroll 
 </li>
</ul>
</div>