diff --git a/css/kunai/site/layout.css b/css/kunai/site/layout.css index aaa58b3..b465fe5 100644 --- a/css/kunai/site/layout.css +++ b/css/kunai/site/layout.css @@ -227,8 +227,22 @@ main { } @media (max-width: 768px) { + /* + * スマホでは「ビューポート固定シェル + 内側スクロール」をやめ、 + * ドキュメント(html/body)自身をスクローラにする。これによりブラウザの + * 引っ張って更新 (pull-to-refresh) が発火するようになる。 + * see: https://github.com/cpprefjp/kunai/issues/58 + */ + body { + overflow: visible; + } + body > header { /* box-shadow: 0px -12px 10px 8px rgba(0, 0, 0, 0.8); GPUメモリ削減のため無効化 */ + + /* ドキュメントスクロール時もナビバーを追従表示する */ + position: sticky; + top: 0; } @@ -253,8 +267,13 @@ main { } } - main { - overflow-y: scroll; + /* 内側スクローラをやめ、内容の高さぶんだけ伸ばす (スクロールは body 側で行う)。 + ベースの `body main { height: … }`(詳細度 0,0,2)に勝つよう body main で指定し、 + overflow は両軸まとめて visible にする (片軸だけだと計算値が auto に化けて + スクロールコンテナのまま残るため)。 */ + body main { + overflow: visible; + height: auto; > .container-fluid > .row:first-child { flex-direction: column; @@ -285,6 +304,13 @@ main { // flex-basis: 100dvw; flex-basis: unset; + /* 高さはベースの 95dvh のままにして際限なく伸びるのを防ぎつつ、パネル内を + 縦スクロール可能にしてナビゲーションツリー全体へアクセスできるようにする。 + (height: auto にするとツリーが全展開して際限なく伸びてしまう) + see: https://github.com/cpprefjp/kunai/pull/182 のレビュー指摘 */ + height: $main-height; + overflow-y: auto; + border: none; /* box-shadow: 0px 9px 16px 2px rgba(0, 0, 0, 0.8); GPUメモリ削減のため無効化 */