高さを判定してoverflow-yプロパティで縦スクロール

2021.02.06

画面の高さが要素の高さよりも低くなった場合、要素にoverflow-yプロパティを適用して要素内のコンテンツを縦スクロールで表示します。
デモページはこちら

画面の高さと要素の高さはjQueryでspanタグ内に出力します。

<div class="contents">
<p class="title">resize</p>
<p>画面の高さ：<span class="winh"></span><br>ボックスの高さ：<span class="boxh"></span></p>
<div class="box">
	<p>ダミーテキストダミーテキストダミーテキストダミーテキスト</p>
	<p>ダミーテキストダミーテキストダミーテキストダミーテキスト</p>
	<p>ダミーテキストダミーテキストダミーテキストダミーテキスト</p>
	<p>ダミーテキストダミーテキストダミーテキストダミーテキスト</p>
	<p>ダミーテキストダミーテキストダミーテキストダミーテキスト</p>
	<p>ダミーテキストダミーテキストダミーテキストダミーテキスト</p>
	<p>ダミーテキスト終了</p>
</div>
</div>

画面の高さが要素の高さよりも低くなった場合、要素にoverflow-y: auto;とheight: calc(100vh - 181px);を適用します。縦スクロールの表示にはoverflow-yとheight、両方のプロパティが必要です。要素の高さ100vhから181pxを差し引いているのは、要素以外のコンテンツを表示するためです。181pxは要素以外のコンテンツの高さです。jQueryで算出しています。
またbodyタグにクラス名is-fixedを適用して、ウィンドウの縦スクロールを非表示にします。
bodyタグに適用している-webkit-text-size-adjust: 100%;は、スマートフォンを横向きにした時に文字サイズが大きくなってしまうのを防ぐ設定です。デフォルト値のautoから100%に変更することで、文字サイズの自動調整をオフにできます。

body {
	-webkit-text-size-adjust: 100%;
}
.is-fixed {
	position: fixed;
	width: 100%;
	height: 100%;
}
.box {
	max-width: 280px;
	margin: 0 auto;
	border: 1px solid #000;
	padding: 1em;
}
.is-overflow-y {
	overflow-y: auto;
	height: calc(100vh - 181px);
	background: #3bbbff;
}

jQueryはページ読み込み時とリサイズ時の動作を設定します。要素の高さは固定値にして、画面の高さと比較してクラス名を付けるか付けないか判定します。

$(window).on('load resize', function() {
  var winh = $(window).height();

  if( 421 > winh ) {
    $('body').addClass('is-fixed');
    $('.box').addClass('is-overflow-y');
  } else {
    $('body').removeClass('is-fixed');
    $('.box').removeClass('is-overflow-y');
  }

  var boxh = $('.box').outerHeight();
  $('.winh').text(winh + 'px');
  $('.boxh').text(boxh + 'px');

  //ボックス以外のコンテンツの高さ算出用
  //var contentsh = $('.contents').outerHeight();
  //console.log(contentsh - boxh);
});