スクロールバーの長さを親ブロックよりも小さくするにはどうすればよいですか？

Question

親ブロックよりも短いスクロールバーを作成する必要があります。それがCSSだけなら完璧です！どうやってやるの？

img that shows exactly what I need

Answer 1

あなたは子クラスでoverflow:autoを使用することができ、以下に簡単な例です。スクロールバー

.parent { 
 
    height:100px; 
 
    border:1px solid #000000; 
 
    } 
 
.child { 
 
    height:50%; 
 
    overflow-y: scroll; 
 
    width:50%; 
 
    }

<div class="parent"> 
 
    <div class="child"> 
 
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has </p> 
 
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has </p> 
 
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has </p> 
 
    </div> 
 
</div>

をカスタマイズする

チェックtricks