伪造webkit滚动条的左右边距？答案

【问题标题】：Faking left and right margins for webkit scrollbar?伪造webkit滚动条的左右边距？
【发布时间】：2017-11-29 18:25:43
【问题描述】：

我有一个下拉菜单，需要一个带有左右边距的滚动条。我正在使用-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 来做这件事。（此外，始终显示滚动条不是可接受的解决方案。）

【问题讨论】：

标签： css webkit

【解决方案1】：

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

.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。

【讨论】：