要素内のスクロールが一番下まで移動したときにチェックボックスを押せるようにする方法

以前はページの下までに移動したら処理をする方法を紹介しました。

今回はページ全体ではなく特定の要素内のスクロールが一番下まで移動したときに処理を行う方法を紹介していきたいと思います。

要素内のスクロールが一番下まで移動したらチェックボックスを押せるようにする方法になります。

読み込み時はディセーブルで押せないようになっています。

応用すればボタンにも使えたりします。

よく使われる処理なので覚えておくと良いと思います。

要素内のスクロール処理

html

<div id="scroll_box">
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>

css

#scroll_box {
	display: block;
	top: 100px;
	left: 100px;
	padding: 10px;
	width: 300px;
	height: 200px;
	overflow-y: scroll;
	background: #eee;
	margin-bottom: 40px;
}

js

jQuery(function() {
	jQuery('#scroll_box').scroll(function(){
		var element = document.getElementById('scroll_box');
		var scroll = this.scrollTop;
		var range = this.scrollHeight - this.offsetHeight;

		if (scroll == range || scroll > range) {
			jQuery('input[type=checkbox].terms_check_control').prop('disabled', false);
	        }
	});
});

サンプル