Microsoft Edgeでのみ、複数のページで実装しているjQueryの動作が安定しない

Question

経緯

サイト内に設置しているメールフォームAとメールフォームB
（共にWordpressのプラグインMW WP Formで実装）のページに
規約文章をすべてスクロールしないと規約同意するのチェックボックスを
クリックできないようにするスクリプトをjQueryで実装しています。

Google Chrome、Firefox、IE11などでは動作するのですが、
Microsoft Edgeのみ動作が安定しません。

発生している問題

Microsoft Edgeにて
メールフォームAにアクセス後にメールフォームBにアクセスすると
メールフォームBでのみjQueryが動作しません。
逆にメールフォームBにアクセス後にメールフォームAにアクセスすると
メールフォームAでのみjQueryが動作しません。
F12でコンソールを開いてみても特にエラーメッセージもなく、
どうしてこのような現象が起こっているのかが分からない状況です。

該当のソースコード

<!-- MW WP Formにて出力 -->
<div id="termsWrapper">
	<div id="terms">
	<!-- 各規約 -->
	</div>
</div>
<label for="termscheck-1">
	<input type="checkbox" name="termscheck[data][]" value="ご利用規約に同意する" id="termscheck-1" />
	<span class="mwform-checkbox-field-text">ご利用規約に同意する</span>
</label>

//（変更前）
<script src='https://data-archives.jichodo.co.jp/mng/wp-includes/js/jquery/jquery.js?ver=1.12.4-wp'></script>
<script> 
$(function(){
	document.getElementById('termscheck-1').disabled = true;
	$('label[for="termscheck-1"]').attr('disabled',true);
});
$("#termsWrapper").scroll(function(){
	var setTop = $(this).scrollTop();
	var setHeight =$("#terms").height() - 270; //#termsWrapperの高さ指定にあわせ調整
	if ((setHeight - setTop) < 15) {
		document.getElementById('termscheck-1').disabled = false;
		$('label[for="termscheck-1"]').attr('disabled',false);
        }
});
</script>

//（修正後ソース※未解決）
<script src='https://data-archives.jichodo.co.jp/mng/wp-includes/js/jquery/jquery.js?ver=1.12.4-wp'></script>
<script> 
$(function(){
    $('#termscheck-1').prop('disabled',true);
    $('label[for="termscheck-1"]').prop('disabled',true);
	
	$("#termsWrapper").scroll(function(){
		var setTop = $(this).scrollTop();
		var setHeight =$("#terms").height() - 270; //#termsWrapperの高さ指定にあわせ調整
		if ((setHeight - setTop) < 15) {
			$('#termscheck-1').prop('disabled',false);
			$('label[for="termscheck-1"]').prop('disabled',false);
		}
	});
});
</script>

メールフォームAでもメールフォームBでも
問題なくチェックボックスを制御できれば
別の記述方法でも問題ございません。
もしお心当たりがあればご指摘いただけますと幸いです。

Comments

[kyoya0819]

安定しないというのは？

[takamura_leo]

どう説明したらいいのかわからないのですが、
Microsoft Edgeにて
メールフォームAにアクセス後にメールフォームBにアクセスすると
メールフォームBでのみjQueryが動作せず、
逆にメールフォームBにアクセスした後にメールフォームAにアクセスすると
メールフォームAでのみjQueryが動作しないという現象が起きています。
アクセスする順序によって動作したりしなかったりする状況を安定しないと表現しています。

なにか別の表現に言い換えた方がよければ修正いたします。

[x_x]

#termsWrapper, #terms にかかるスタイルはどうなっていますか？

[takamura_leo]

#termsWrapper には下記の通りCSSを設定しています。
#termsには特にCSSをかけておりません。

#termsWrapper {
height: 300px;
margin: 20px 0 30px;
overflow-y: scroll;
padding: 15px;
border: 1px solid #a0a0a0;
background: #fff;
font-size: 1.3rem;
line-height: 2;
}

Answer 1

jQueryの使い方が中途半端ですね

• $(function(){ }のスコープに全部押し込んでください
• getElementByIdとかやめましょう
• attrでdisabled変えてますがpropですね

Comments

[takamura_leo]

ご指摘有難うございます。
IE11での動作がうまくいかず色々試した結果でしたが、
一旦上記の通り記述を変更して確認してみます。
-----
追記：
以下の通り変更し、Google Chrome、Firefox、IE11にて動作いたしました。
ご指摘有難うございました。
しかしやはりMicrosoft Edgeのみ動作が安定しない状況です。

$(function(){
$('#termscheck-1').prop('disabled',true);
$('label[for="termscheck-1"]').prop('disabled',true);

$("#termsWrapper").scroll(function(){
var setTop = $(this).scrollTop();
var setHeight =$("#terms").height() - 270; //#termsWrapperの高さ指定にあわせ調整
if ((setHeight - setTop) < 15) {
$('#termscheck-1').prop('disabled',false);
$('label[for="termscheck-1"]').prop('disabled',false);
}
});
});

Answer 2

Chrome においても動作させられないので box-sizing など提示されていないものがあるのではないでしょうか？
いずれにせよスクロール最大量は scrollHeight - clientHeight で出せるので子を見る必要がありません。

        var scrollMaxY = this.scrollHeight - this.clientHeight;
        if (scrollMaxY - setTop < 15) {

https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight
https://developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight

Comments

[takamura_leo]

ご指摘有難うございます。
確認したところ仰るとおりChromeでもEdgeと同様の現象が発生しておりました。

box-sizingの記述は他にありませんが、お教えいただいたjsに変更いたしました。
scrollHeight、clientHeightの仕様についてご教示いただき有難うございます。

ただしこれでもEdge、Google Chromeでの動作が意図したものにならないため、
もうしばらく検証してみようと思います。

Answer 3

解決と言っていいのか不明ですが、とりあえず想定の動作にはなったので記載いたします。

まずyambejpさん、x_xさんのご指摘を参考に、以下の通りコードを記述いたしました。

<!-- MW WP Formにて出力 -->
<div id="termsWrapper">
    <!-- 各規約 -->
</div>
<label for="termscheck-1">
    <input type="checkbox" name="termscheck[data][]" value="ご利用規約に同意する" id="termscheck-1" />
    <span class="mwform-checkbox-field-text">ご利用規約に同意する</span>
</label>

<script src='https://data-archives.jichodo.co.jp/mng/wp-includes/js/jquery/jquery.js?ver=1.12.4-wp'></script>
<script> 
$(function(){
    $('#termscheck-1').prop('disabled',true);
    $('label[for="termscheck-1"]').prop('disabled',true);

    $("#termsWrapper").scroll(function(){
        var setTop = $(this).scrollTop();
        var scrollMaxY = this.scrollHeight - this.clientHeight;
        if (scrollMaxY - setTop < 15) {
            $('#termscheck-1').prop('disabled',false);
            $('label[for="termscheck-1"]').prop('disabled',false);
        }
    });
});
</script>

この状態にするとGoogle Chrome・Microsoft Edgeにて

1. 　Aのフォーム→BのフォームでアクセスするとBのフォームで動作しない
2. 　Bのフォーム→AのフォームでアクセスするとAのフォームで動作しない
3. 　次のフォームに遷移後、スーパーリロードをすると動作する

という状況になりました。（コード変更前は３の挙動はしていませんでした）

ですので苦肉の策で、Aのフォーム、Bのフォームにアクセスした際にスーパーリロードを1度行う、という処理を記述したところ想定の動作になりました。

<?php /* Wordpressテーマのheader.php内 */?>
<?php if(is_page("form-a")):?>
	<script>
	if (window.name != "form-a")
	{
		location.reload(true);
		window.name = "form-a";
	}
	</script>
<?php elseif(is_page("form-b")):?>
	<script>
	if (window.name != "form-b")
	{
		location.reload(true);
		window.name = "form-b";
	}
	</script>
<?php else:?>
	<script>
		window.name = "other";
	</script>
<?php endif; ?>

もっとスマートな解決方法がありそうな気もするのですが、想定の動作をしているため解決としました。
この記述がなくともFirefoxやIE11では想定の動作をしていたため、原因については不明のままです。

アドバイスをくださったお二方、有難うございました。