Question

我用简单的ul li列表制作了ul，其中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并可以垂直滚动其他所有内容的东西？像这样

releases-timeline

Answer 1

.account-selector__listing.dropdown.is-open > li:first-child {
    overflow: hidden;
}

尝试一下，如果不能解决问题，请告诉我。请做评论。

Answer 2

您可以与两个ul一起食用。让我知道两个ul是否有效。您可以将最大高度放在这里。

ul:nth-of-type(2) {
 max-height: 80px;
 overflow: auto;
}
.account-selector__item {
margin-bottom: 10px;
}

<ul class="account-selector__listing ng-scope dropdown is-open" >
           <li class="account-selector__item ng-scope active dropdown">
           //fixed contnent
</ul>
<ul class="account-selector__listing ng-scope dropdown is-open" >
           <li class="account-selector__item ng-scope active dropdown">
            //scroll content 
 </li>
           <li class="account-selector__item ng-scope active dropdown">
                //scroll content 
 </li>
           <li class="account-selector__item ng-scope active dropdown">
                //scroll scroll 
 </li>
           <li class="account-selector__item ng-scope active dropdown">
                //scroll scroll 
 </li>
           <li class="account-selector__item ng-scope active dropdown">
                //scroll scroll 
 </li>
           <li class="account-selector__item ng-scope active dropdown">
                //scroll scroll 
 </li>
</ul>

Answer 3

如果在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>

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

3 个答案: