ウェブキットのスクロールバーの左と右の余白を偽っていますか？

Question

左と右の余白を持つスクロールバーが必要なドロップダウンがあります。私は-webkit-scrollbarを使用していますが、スクロール軸に沿った余白しかサポートしていないので、コンテナ内のアイテムの右余白で水平マージンを近似しています。あなたが私のコードで見ることができるように、外側div。

しかし、これは、コンテナにスクロール可能な項目が不十分な場合に、見苦しい余分な右のパディングを作成します（私の例では2番目のドロップダウンを参照）。スクロールバーがない場合は、右端が他のすべてのエッジと同じに見えるようにします。

.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使用される：ドロップダウンが5つの以上のアイテムをスクロール可能になるので、n番目の子（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>

、Iはテーブルレイアウトを追加しました。 4つ以上の行がある場合、2番目の列の幅は10pxに設定されます。