【jQuery】下までスクロールしたか判定して同意ボタンを押せるようにする方法

RELEASE / 2024.4.28 UPDATE / 2024.04.20

disabled

jQuery

スクロール

同意ボタン

こんにちは、岐阜・名古屋を拠点に全国各地からご依頼いただくWEBサイトを制作しているフリーランスエンジニアの寺井です。

お問い合わせフォームにあるプライバシーポリシーの文章はどこのサイトも大体同じことが書かれているし、読むのが面倒でついつい読まずにそのまま送信してしまうことがよくあります。
しかし、中には重要なことが書かれていて、同意できないのに同意してしまいトラブルに発展してしまう可能性があります。
そんな時にプライバシーポリシーのコンテンツを最後までスクロールしなければ同意ボタンを押せない状態にしておくことで必ずプライバシーポリシーを最後まで表示させることが出来ます。
この記事では下までスクロールしたか判定して下までスクロールした場合に同意ボタンを押せるようにする方法をご紹介したいと思います。

この記事の目次を表示

1 完成コード
2 コードの解説
3 まとめ

完成コード

まずは完成コードをご紹介します。

HTMLはこちら。

<div class="policy">
    <p>文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。</p>
    <p>文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。</p>
    <p>文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。</p>
</div>
<form>
    <label class="policy-check -disabled">
        <input type="checkbox" disabled>
        <span>最後まで読みました</span>
    </label>
</form>

下までスクロールするまでチェック出来ないようにするために<input type="checkbox">にdisabled属性を設定しておきます。
これを設定しておかないと常に同意ボタンが押せる出来る状態になってしまいます。

CSSはこちら。

*{
    margin: 0;
    padding: 0;
}
body{
    padding: 10px;
}
.policy{
    height: 100px;
    margin-bottom: 10px;
    padding: 15px;
    border: 1px solid;
    overflow: auto;
}
.policy p{
    line-height: 1.8;
}
.policy-check{
    width: 100%;
    max-width: 200px;
    padding: 15px;
    border: 1px solid;
    display: block;
    text-align: center;
    margin: 0 auto;
    color: #000;
}
.policy-check.-disabled{
    border: 1px solid #ccc;
    color: #ccc;
}

jQueryはこちら。予めjQueryを読み込むようにします。

let policy_height;
let scroll_position;

// 下までスクロールした判定したい要素の高さを取得する関数
function get_height(){
    policy_height = $('.policy').innerHeight();
}

// 下までスクロールしたか判定する関数
function check_scroll(){
    scroll_position = $(this).scrollTop();
    if( scroll_position + policy_height >= $(this)[0].scrollHeight ){
        undisabled();
    }
}

// 下までスクロールした場合にdisabled（ロック）を解除する関数
function undisabled(){
    $('.policy-check input[type="checkbox"]').attr('disabled',false);
    $('.policy-check').removeClass('-disabled');
}

// ページ読み込み時とリサイズ時
$(window).on('load resize',function(){
    get_height();
});

// スクロール時
$('.policy').on('scroll',function(){
    check_scroll.call(this);
});

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

コードの解説

ここからはHTML、CSS、js、それぞれのコードの解説です。

HTMLのコードの解説

HTMLのコードで必須なのは<input type="checkbox">にdisabled属性を設定することです。
これを設定することでページを読み込んだ段階ではチェック出来ないようになります。
jQueryのコードで下までスクロールした段階でdisabled属性を外してチェック出来るようにします。

<label class="policy-check">に指定されているclass="-disabled"はお好みになります。
このサンプルコードの場合、「最後まで読みました」全体をチェック出来ない時は若干薄くするために指定しています。

CSSのコード解説

CSSのコードのポイントは下までスクロールさせたい要素にheightとoverlof: auto;を指定することです。
heightの指定がある要素に合わせてoverlof: auto;を指定することでその高さ以上の場合、自動でスクロールバーが出るようになります。

jQueryのコードの解説

jQueryのコードは読み込み時、リサイズ時、スクロール時にそれぞれ関数が実行されるように設定しています。

下までスクロールしたか判定したい要素の高さを取得する関数
下までスクロールしたか判定する関数
下までスクロールした場合にdisabled（ロック）を解除する関数

関数はそれぞれこのような役割をしています。
それではそれぞれの関数を順番にご紹介します。

下までスクロールしたか判定したい要素の高さを取得する関数

「下までスクロールしたか判定したい要素の高さを取得する関数」はこちら。

function get_height(){
    policy_height = $('.policy').innerHeight();
}

<div class="policy">の高さを取得しています。ここに下までスクロールしたか判定したい要素を指定します。

この関数をページ読み込み時とページリサイズ時に実行するように設定しています。

// ページ読み込み時とリサイズ時
$(window).on('load resize',function(){
    get_height();
});

ページの読み込み時の他に、リサイズした時にも実行するのは、CSSの指定によってはページをリサイズすることで要素の横幅が縮まったり逆に広がることで高さが変動する可能性があるためです。
ページ読み込み時のみ高さを取得すると場合によっては変なタイミングで下までスクロールしたと判定されてしまいます。

下までスクロールしたか判定する関数

「下までスクロールしたか判定する関数」はこちら。

// 下までスクロールしたか判定する関数
function check_scroll(){
    scroll_position = $(this).scrollTop();
    if( scroll_position + policy_height >= $(this)[0].scrollHeight ){
        undisabled();
    }
}

この関数をスクロール時に実行するようにしています。

// スクロール時
$('.policy').on('scroll',function(){
    check_scroll.call(this);
});

$(this).scrollTop()で要素のスクロールした座標を取得します。
$(this)[0].scrollHeightでスクロールする要素のスクロール分含めての実際の高さを取得します。
そして、scroll_position + policy_height >= $(this)[0].scrollHeight、この計算式で下までスクロールしたかどうかを判定することが出来ます。

scroll_position + policy_heightの合計値が$(this)[0].scrollHeight以上になった場合、一番下までスクロールしたことになります。

一番下までスクロールしたら、最後にundisable()関数、次にご紹介する「下までスクロールした場合にdisabled（ロック）を解除する関数」を実行します。

下までスクロールした場合にdisabled（ロック）を解除する関数

「下までスクロールした場合にdisabled（ロック）を解除する関数」はこちら。

// 下までスクロールした場合にdisabled（ロック）を解除する関数
function undisabled(){
    $('.policy-check input[type="checkbox"]').attr('disabled',false);
    $('.policy-check').removeClass('-disabled');
}

.attr('disabled',false)で、<input type="checkbox">に指定されているdisabled属性を取り除きます。
そして、removeClass('-disabled')で、<label class="policy-check">に指定されているclass="-disabled"を取り除きます。
class="-disabled"はこのサンプルのHTMLの場合は必要ですが、必須の設定ではありません。

ここまでのコードで、下までスクロールしたか判定して同意ボタンを押せるようにする機能の実装が完成です。

まとめ

いかがでしたか？
これで最低限、プライバシーポリシーなど大事なことが書かれている内容を下まで表示させることは出来ます。
ただし、下まで表示したからといって、そのユーザーが本当に内容を読んだかどうかを保証するものではありません。
絶対読んでほしい内容は、厳選した上え、別の目に留まる場所に大きな文字や目立つ色で記載するようにして未然にトラブルを防ぐ対策をとるようにしましょう。

最後にもう一度、完成コードを記載しておきます。
お好みで書き換えた上でコピペしてご使用ください。

<div class="policy">
    <p>文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。</p>
    <p>文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。</p>
    <p>文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。</p>
</div>
<form>
    <label class="policy-check -disabled">
        <input type="checkbox" disabled>
        <span>最後まで読みました</span>
    </label>
</form>

*{
    margin: 0;
    padding: 0;
}
body{
    padding: 10px;
}
.policy{
    height: 100px;
    margin-bottom: 10px;
    padding: 15px;
    border: 1px solid;
    overflow: auto;
}
.policy p{
    line-height: 1.8;
}
.policy-check{
    width: 100%;
    max-width: 200px;
    padding: 15px;
    border: 1px solid;
    display: block;
    text-align: center;
    margin: 0 auto;
    color: #000;
}
.policy-check.-disabled{
    border: 1px solid #ccc;
    color: #ccc;
}

let policy_height;
let scroll_position;

// 下までスクロールした判定したい要素の高さを取得する関数
function get_height(){
    policy_height = $('.policy').innerHeight();
}

// 下までスクロールしたか判定する関数
function check_scroll(){
    scroll_position = $(this).scrollTop();
    if( scroll_position + policy_height >= $(this)[0].scrollHeight ){
        undisabled();
    }
}

// 下までスクロールした場合にdisabled（ロック）を解除する関数
function undisabled(){
    $('.policy-check input[type="checkbox"]').attr('disabled',false);
    $('.policy-check').removeClass('-disabled');
}

// ページ読み込み時とリサイズ時
$(window).on('load resize',function(){
    get_height();
});

// スクロール時
$('.policy').on('scroll',function(){
    check_scroll.call(this);
});

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.