🐛CSSでoverflowプロパティ使用時に右と下のpaddingやmarginが効かないバグ
overflowプロパティにautoやscrollを指定してスクロール可能な領域を作った際、paddingプロパティを指定するとpadding-rightとpadding-bottomだけ描画されないバグがあります。
padding-rightが描画されない
まずは普通に横スクロールを実装してみます。
<div class="scroll">
<div class="scroll_inner">スクロール領域</div>
</div>
.scroll {
display: inline-block;
width: 250px;
height: 150px;
padding: 1.5em;
background-color: #c4ddb9 ;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.scroll_inner {
height: 500px;
background-color: #a1c6e7 ;
}
右にスクロールしていくとpadding-right分の余白が空いていないとわかります。今のところ、すべてのブラウザでpadding-rightが描画されません。
そこで、padding-rightは0にしておいて、擬似要素::afterでpadding-right分のwidthを指定すればよいです。
.scroll {
display: inline-block;
width: 250px;
padding: 1.5em 0 1.5em 1.5em;
text-align: left;
background-color: #c4ddb9 ;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.scroll_inner {
position: relative;
width: 500px;
background-color: #a1c6e7 ;
}
.scroll_inner::after {
position: absolute;
top: 0;
left: 100%;
width: 1.5em;
height: 1px;
content: '';
}
padding-bottomが描画されない
縦スクロールでも同様のバグが発生します。
.scroll {
display: inline-block;
width: 250px;
height: 150px;
padding: 1.5em;
text-align: left;
background-color: #c4ddb9 ;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.scroll_inner {
height: 500px;
background-color: #a1c6e7 ;
}
下にスクロールしていくとpadding-bottom分の余白が空いていないとわかります。ChromeやSafariでは正常に描画されますが、IEやEdge、Firefoxでこのバグが発生しています。
そこで、padding-bottomは0にしておいて、擬似要素::afterでpadding-bottom分のheightを指定すればよいです。この場合はpositionプロパティにabsoluteを指定して絶対配置しなくても、ブロック要素として下に配置すればよいです。
.scroll {
display: inline-block;
width: 250px;
height: 150px;
padding: 1.5em 1.5em 0;
text-align: left;
background-color: #c4ddb9 ;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.scroll::after {
display: block;
width: 1px;
height: 1.5em;
content: '';
}
.scroll_inner {
height: 500px;
background-color: #a1c6e7 ;
}
サンプル
記事中で紹介したサンプルをダウンロードできます。
この記事が気に入ったらサポートをしてみませんか?