オーバーフローdivに収まるようにスクロールバーを調整する方法はありますか？

Question

私はdivを自動オーバーフローで持っているので、内容がdivより大きい場合はスクロールバーを生成します。私はまた、ボーダー半径を持つdivの周りに境界線を持っています。私はhereの意味を見ることができます。

#TimelinePlaceholder { 
    max-height:200px; 
    overflow-y:auto; 
    border: 1px solid lightgrey; 
    border-radius:20px; 
} 

#TimelinePlaceholder>p { 
    font-size:20px; 
} 

HTML

<div id="TimelinePlaceholder"> 
    <p>Lorem ipsum dolor sit amet, qui ad aliquam vituperatoribus, tantas eloquentiam sed 
    eu, amet animal maluisset at vim. Solum tation mel ex. Ut mea augue tacimates senserit. 
    Vis at equidem facilisi indoctum, impetus intellegam ut qui, an eos autem latine 
    invenire. Atqui congue vocibus no eos.</p> 

    <p>Vix at alia mediocrem dissentiet, alii efficiendi in usu, aperiam alterum 
    constituto in sed. Ei nec maiestatis voluptatibus. Quot labitur in ius, inermis 
    petentium constituto mea cu. Dicunt tamquam assentior eam an, eum ne singulis 
    expetenda adversarium. Vidisse dolorum laboramus usu et.</p> 

    <p>Habeo copiosae maiestatis per no. At pri nostrum forensibus, explicari assueverit 
    per ne, eros altera nusquam vel ad. Nec hinc tantas te. Mutat novum moderatius ei qui, 
    vel maiestatis percipitur in, est bonorum forensibus quaerendum ne. Sea mazim dictas 
    tincidunt cu, quas expetendis scribentur id mel.</p> 
</div> 

CSSあなたはスクロールバーが国境の端に少し突き出どのように見ることができますか？ボーダー内に収まるようにスクロールバーを少し左に持っていく方法はありますか？あるいは、スクロールバーの外側の端を丸くしてborder-radiusに収まるようにしますか？

Answer 1

スクロールバー要素を自分自身で丸めたい場合は、あまり経験がないカスタムスクロールバーを作成する必要があります。いくつかの仕事があります。

追加のラッパー要素を追加してスクロールバーの端を切り取ることで、2番目のオプションを簡単に修正できます。余分な要素を追加する

は

.scroll-container { 
 
    overflow: hidden; 
 
    border-radius: 20px; 
 
    border: 1px solid lightgrey; 
 
} 
 
.scroll { 
 
    max-height: 200px; 
 
    overflow-y: auto; 
 
} 
 
.scroll > p { 
 
    font-size: 20px; 
 
}

<div class="scroll-container"> 
 

 
    <div class="scroll"> 
 

 
    <p> 
 
     Lorem ipsum dolor sit amet, qui ad aliquam vituperatoribus, tantas eloquentiam sed eu, amet animal maluisset at vim. Solum tation mel ex. Ut mea augue tacimates senserit. Vis at equidem facilisi indoctum, impetus intellegam ut qui, an eos autem latine 
 
     invenire. Atqui congue vocibus no eos. 
 
    </p> 
 

 
    <p> 
 
     Vix at alia mediocrem dissentiet, alii efficiendi in usu, aperiam alterum constituto in sed. Ei nec maiestatis voluptatibus. Quot labitur in ius, inermis petentium constituto mea cu. Dicunt tamquam assentior eam an, eum ne singulis expetenda adversarium. 
 
     Vidisse dolorum laboramus usu et. 
 
    </p> 
 

 
    <p> 
 
     Habeo copiosae maiestatis per no. At pri nostrum forensibus, explicari assueverit per ne, eros altera nusquam vel ad. Nec hinc tantas te. Mutat novum moderatius ei qui, vel maiestatis percipitur in, est bonorum forensibus quaerendum ne. Sea mazim dictas 
 
     tincidunt cu, quas expetendis scribentur id mel. 
 
    </p> 
 

 
    </div> 
 

 
</div>

完璧ですが、かなりまっすぐ進む実装します。