名称未設定-1__1_

🐛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が描画されません。

画像1

そこで、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でこのバグが発生しています。

画像2

そこで、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 ;
}

サンプル

記事中で紹介したサンプルをダウンロードできます。

今すぐ始めるCSSレシピブック

この記事が気に入ったらサポートをしてみませんか?