css - 伪造 webkit 滚动条的左右边距？

Question

我有一个下拉菜单，需要一个带有左右边距的滚动条。我正在使用-webkit-scrollbar，但据我所知，它只支持沿滚动轴的边距，所以我一直在用容器内元素的右边距来近似水平边距，并在外部 div，如您在我的代码中所见。

但是，当容器没有足够的元素可滚动时，这会产生难看的超宽右填充(请参阅我的示例中的第二个下拉列表)。当没有滚动条时，我希望右边缘看起来与所有其他边缘相同。

.dropdown {
    width: 360px;
    padding-right: 10px; /* pseudo-right-margin for scrollbar */
    background-color: green;
    padding-bottom: 10px;
    max-height: 365px;
    margin-bottom: 20px;
}

.itemContainer {
    max-height: 355px;
    overflow-y: auto;
    padding-left: 10px;
    padding-top: 10px;
}

.item {
    background-color: white;
    height: 51px;
    padding: 10px;
    margin-bottom: 10px;
    margin-right: 10px; /* pseudo-left-margin for scrollbar */
}

.item:last-of-type {
    margin-bottom: 0px;
}

@media screen {
    .itemContainer::-webkit-scrollbar {
        width: 6px;
        border-radius: 2px;
    }
    .itemContainer::-webkit-scrollbar-thumb {
        border-radius: 2px;
        background-color: black;
        border: solid red 10px;
    }
    .itemContainer::-webkit-scrollbar-track {
        margin-top: 10px;
        background-color: yellow;
        width: 6px;
    }
}

<div class="dropdown">
  <div class="itemContainer">
    <div class="item">thing</div>
    <div class="item">thing</div>
    <div class="item">thing</div>
    <div class="item">thing</div>
    <div class="item">thing</div>
  </div>
</div>

<div class="dropdown">
  <div class="itemContainer">
    <div class="item">thing</div>
    <div class="item">thing</div>
    <div class="item">thing</div>
    <div class="item">thing</div>
  </div>
</div>

我对纯 css 解决方案的唯一想法是以某种方式使用 .item:nth-child(5) 伪选择器，因为下拉列表可以滚动 5 个或更多元素，但我不知道我会使用什么属性给它。

我已经有了一个 javascript 解决方案，但如果可能的话，我想只用 css 来解决这个问题。 (另外，总是显示滚动条不是一个可接受的解决方案。)

Answer 1

好的。没那么难，但不幸的是我的解决方案中有很多额外的 html。请告知是否需要评论和/或解释。结果如下。

.dropdown {
    width: 360px;
    background-color: green;
    padding-bottom: 10px;
    max-height: 365px;
    margin-bottom: 20px;
}
.itemContainer {
    max-height: 355px;
    overflow-y: auto;
    padding-left: 10px;
    padding-top: 10px;
    margin-right: 10px;
}
.itemContainer>div {
    display: table;
    width: 100%;
}
.item {
    display: table-row;
}
.item>div{
    display: table-cell;
    vertical-align: top;
    padding-bottom: 10px;
}
.item:last-child>div {
    padding-bottom: 0;
}
.item > div:nth-child(1) {
    width: 100%;
}
.item>div:nth-child(1)>div{
    background-color: white;
    padding: 10px;
    height: 51px;
}
.item:nth-child(5) > div:nth-child(2) > div {
    width: 10px;
}
@media screen {
    .itemContainer::-webkit-scrollbar {
        width: 6px;
        border-radius: 2px;
    }
    .itemContainer::-webkit-scrollbar-thumb {
        border-radius: 2px;
        background-color: black;
        border: solid red 10px;
    }
    .itemContainer::-webkit-scrollbar-track {
        margin-top: 10px;
        background-color: yellow;
        width: 6px;
    }
}

  <div class="dropdown">
    <div class="itemContainer"><div>
      <div class="item"><div><div>thing</div></div><div><div></div></div></div>
      <div class="item"><div><div>thing</div></div><div><div></div></div></div>
      <div class="item"><div><div>thing</div></div><div><div></div></div></div>
      <div class="item"><div><div>thing</div></div><div><div></div></div></div>
      <div class="item"><div><div>thing</div></div><div><div></div></div></div>
    </div></div>
  </div>

  <div class="dropdown">
    <div class="itemContainer"><div>
      <div class="item"><div><div>thing</div></div><div><div></div></div></div>
      <div class="item"><div><div>thing</div></div><div><div></div></div></div>
      <div class="item"><div><div>thing</div></div><div><div></div></div></div>
      <div class="item"><div><div>thing</div></div><div><div></div></div></div>
    </div></div>
  </div>

简而言之，我添加了表格布局。当超过 4 行时，第二列的宽度设置为 10px。