1、resize時に動作がカクカクする 2、読み込み完了時heightが読み込まれない

問題点

先にこちらがコードです。

<html lang="ja">

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	<title>TEST</title>

	<style>
		body {
			margin: 0;
		}

		.btn,
		.first_btn {
			position: relative;
		}

		#next_a,
		#next_b,
		#next_c,
		#top {
			font-size: 25px;
			cursor: pointer;
			position: absolute;
			bottom: 50px;
			left: 50%;
			margin-left: -25px;
		}

		.title,
		.content {
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.title {
			font-size: 25px;
			background: #000;
			color: #fff;
		}

		.content {
			font-size: 20px;
			background: #eee;
		}
	</style>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

</head>

<body>

	<div class="first_btn">
		<div id="next_a">次へ</div>
	</div>
	<section id="section_a">
		<div class="title">
			<h2>a</h2>
		</div>
		<div class="content">
			<h3>ここに内容</h3>
		</div>
		<div class="btn">
			<div id="next_b">次へ</div>
		</div>
	</section>
	<section id="section_b">
		<div class=title>
			<h2>b</h2>
		</div>
		<div class="content">
			<h2>ここに内容</h2>
		</div>
		<div class="btn">
			<div id="next_c">次へ</div>
		</div>
	</section>
	<section id="section_c">
		<div class="title">
			<h2>c</h2>
		</div>
		<div class="content">
			<h2>ここに内容</h2>
		</div>
		<div class="btn">
			<div id="top">戻る</div>
		</div>
	</section>


	<script>
		$(function() {
			var resizeTimer = null,
				$a = $('#section_a'),
				$b = $('#section_b'),
				$c = $('#section_c'),
				aTop, a_contentTop, bTop, b_contentTop, cTop, c_contentTop;

			$('#next_a').on('click', function() {
				$('body,html').animate({
					scrollTop: aTop
				}, 800, autoscroll_a);
			});

			$('#next_b').on('click', function() {
				$('body,html').animate({
					scrollTop: bTop
				}, 800, autoscroll_b);
			});

			$('#next_c').on('click', function() {
				$('body,html').animate({
					scrollTop: cTop
				}, 800, autoscroll_c);
			});

			$('#top').on('click', function() {
				$('body,html').animate({
					scrollTop: 0
				}, 800);
			});

			function autoscroll_a() {
				setTimeout(function() {
					$('body,html').animate({
						scrollTop: a_contentTop
					}, 300);
				}, 800)
			}

			function autoscroll_b() {
				setTimeout(function() {
					$('body,html').animate({
						scrollTop: b_contentTop
					}, 300);
				}, 800)
			}

			function autoscroll_c() {
				setTimeout(function() {
					$('body,html').animate({
						scrollTop: c_contentTop
					}, 300);
				}, 800)
			}

			//位置取得
			$(window).on('load resize', function() {
				clearTimeout(resizeTimer);
				resizeTimer = setTimeout(function() {

					var hSize = $(this).outerHeight();
					$('.first_btn,.title,.content').height(hSize);
					aTop = $a.offset().top;
					a_contentTop = $a.find('.content').offset().top;
					bTop = $b.offset().top;
					b_contentTop = $b.find('.content').offset().top;
					cTop = $c.offset().top;
					c_contentTop = $c.find('.content').offset().top;

				}, 200);
			});
		});
	</script>
</body></html>

コード

タイトルに書いてある通り。問題点が2つあります。
1、スマホの画面の向きが変わる際、アドレスバーが引っ込んだ時の対策で、resize時の高さの取得を

outerHeight()

で取得しているのですが、スクロールした時にアドレスバーが出たらカクカクresizeしてしまいます。
当然のことだと思うのですが、何かいい方法はないでしょうか？

2、サイトを読み込んだ時にスタイルが崩れているのですが、resizeをすると（画面の向きを縦から横）スタイルが適応されます。
読み込み時にheighを指定すのにはどの様にしたら良いでしょうか？

分かる方おられましたら、ご回答宜しくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

２、に関しては、最初の
$(function() {/
と、最後の
});
を削除すればload時も動作するようです。

</body> 直前なら、なくてもいいでしょう。

ただ、setTimeout で遅延実行してますので、高さの設定前が一瞬見えてしまいますので、
load時は遅延しないようにするといいでしょう。

js
1            //位置取得
2            var delay = 0
3            $(window).on('load resize', function() {
4                clearTimeout(resizeTimer);
5                resizeTimer = setTimeout(function() {
6
7                    var hSize = $(this).outerHeight();
8                    $('.first_btn,.title,.content').height(hSize);
9                    aTop = $a.offset().top;
10                    a_contentTop = $a.find('.content').offset().top;
11                    bTop = $b.offset().top;
12                    b_contentTop = $b.find('.content').offset().top;
13                    cTop = $c.offset().top;
14                    c_contentTop = $c.find('.content').offset().top;
15
16                }, delay);
17                delay = 200;
18            });

投稿2019/09/21 22:46

hatena19

総合スコア34073

退会済みユーザー

2019/09/22 04:52

先日の質問ありがとうございました。よく見ると色々不具合がありまして、質問させて頂いた次第です。上記のコードで動作確認させて頂きました！ありがとうございます。ただ、分からないことがありまして load時の記述の事で「load時は遅延しないように」とありますが、上記のコードで、なぜloadが遅延しないようになっているか、お恥ずかしながら理解できませんでした。どの様な事が起こっているのでしょうか？

hatena19

2019/09/23 01:43

on('load resize')の前で、 var delay = 0 と初期化してあるので、最初のイベント(load)の時は、待機時間0、イベントの最後で、 delay = 200; と設定しているので、それ以降のイベントは、0.2秒待機して実行される、という仕組みです。本来は、setTimeoutの中身を別関数にしておいて、load と resize イベントは別にして、そこから関数を呼び出すというコードにすべきですが、修正が少しですむ手抜きのコードですね。

退会済みユーザー

2019/09/23 03:35

そういうことでしたか！ありがとうございます^^

行動規範の内容に同意します