Open1
Docsifyでデプロイしたページで縦スクロールが効かない
ふじしろ事象
Docsifyでデプロイしたページで縦スクロールが効かない状態になった
対応
後述のstack overflowの投稿から下記のcssをカスタムで追加したところ解消
.content {
overflow: auto;
}
原因
docsifyのスタイルシートを開いてみる。
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@4/lib/themes/vue.css">
これの中身を開いてみると.content要素は以下のようになっている↓
.content {
padding-top: 60px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 300px;
transition: left .25s ease;
}
おそらく下記の設定が原因
-
positionがabsolute -
topとbottomがともに0
これにより上下にはみ出た要素が切り落とされる形になっているのでは。
そこにoverflowを追加したことでスクロールが可能になったものと思われる。
overflowプロパティ
要素のオーバーフロー時、すなわち、要素の内容が多すぎてブロック整形コンテキストに収まらない場合の望ましい動作を両方向について設定します。