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

我有一个下拉列表，需要一个左右边距的滚动条。我使用的是-webkit scrollbar，但据我所知，它只支持沿滚动轴的边距，所以我一直在近似水平边距，在容器内的项目上有一个右边距，在外部div上有一些右边距，正如您在代码中看到的那样

但是，当容器没有足够的项目可滚动时，这会创建难看的超宽右填充（请参见我的示例中的第二个下拉列表）。我希望在没有滚动条的情况下，右边缘看起来与所有其他边缘一样

。下拉列表{
宽度：360px；
右边填充：10px；/*滚动条的伪右边距*/
背景颜色：绿色；
垫底：10px；
最大高度：365px；
边缘底部：20px；
}
.itemContainer{
最大高度：355px；
溢出y：自动；
左侧填充：10px；
填充顶部：10px；
}
.项目{
背景色：白色；
高度：51px；
填充：10px；
边缘底部：10px；
右边距：10px；/*滚动条的伪左边距*/
}
.项目：类型的最后一个{
边缘底部：0px；
}
@媒体屏幕{
.itemContainer:：-webkit滚动条{
宽度：6px；
边界半径：2px；
}
.itemContainer:：-webkit滚动条拇指{
边界半径：2px；
背景色：黑色；
边框：纯红10px；
}
.itemContainer:：-webkit滚动条轨迹{
边缘顶部：10px；
背景颜色：黄色；
宽度：6px；
}
}

事情
事情
事情
事情
事情
事情
事情
事情
事情

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

。下拉列表{
宽度：360px；
背景颜色：绿色；
垫底：10px；
最大高度：365px；
边缘底部：20px；
}
.itemContainer{
最大高度：355px；
溢出y：自动；
左侧填充：10px；
填充顶部：10px；
右边距：10px；
}
.itemContainer>div{
显示：表格；
宽度：100%；
}
.项目{
显示：表格行；
}
.item>div{
显示：表格单元格；
垂直对齐：顶部；
垫底：10px；
}
.项目：最后一个子项>div{
填充底部：0；
}
.项目>分区：第n个子项（1）{
宽度：100%；
}
.项目>分区：第n个子项（1）>分区{
背景色：白色；
填充：10px；
高度：51px；
}
.项目：第n个孩子（5）>分区：第n个孩子（2）>分区{
宽度：10px；
}
@媒体屏幕{
.itemContainer:：-webkit滚动条{
宽度：6px；
边界半径：2px；
}
.itemContainer:：-webkit滚动条拇指{
边界半径：2px；
背景色：黑色；
边框：纯红10px；
}
.itemContainer:：-webkit滚动条轨迹{
边缘顶部：10px；
背景颜色：黄色；
宽度：6px；
}
}

事情
事情
事情
事情
事情
事情
事情
事情
事情