要素を最後までスクロールしたかどうか

同意画面とかでよく見る
「テキスト部分を最後まで読んだら次へすすめるよ！」
を実装するための覚書。すぐ忘れるので。残念なほどに。
次回はコピペで行きたい。

HTML

<div class="box_agreement">

    <div class="textarea">

        <div>

            テキストテキストテキストテキストテキストテキストテキストテキスト

        </div>

    </div>



    <a class="-disabled" href="#">同意するボタン</a>

</div>

jQuery

$('.box_agreement').each( function(){

     const

         box = $(this).find('.textarea'),

         h = box.children('div').outerHeight() - box.outerHeight(),

         btn = $(this).find('a.-disabled');



     box.on('scroll', function(){

         let scr = $(this).scrollTop();

         if ( h - scr <= 0 ) { btn.removeClass('-disabled'); }

     });

});

.textarea と中のdiv の高さの差を求めて、
その分スクロールしたかどうかをチェックしています。
余白に合わせて「h - scr <= 0」の数字を変えてもOK。