JSFiddle - React, Tailwind, and code Playground

by yokano

HTML

<div id="scroll">
    最後までスクロール<br>
    最後までスクロール<br>
    最後までスクロール<br>
    最後までスクロール<br>
    最後までスクロール<br>
    最後までスクロール<br>
    最後までスクロール<br>
    最後までスクロール<br>
    最後までスクロール<br>
    最後までスクロール<br>
    最後までスクロール<br>
    最後までスクロール<br>
    最後までスクロール<br>
    最後までスクロール<br>
    最後までスクロール<br>
    最後までスクロール<br>
    最後までスクロール<br>
    最後までスクロール<br>
    最後までスクロール<br>
    最後までスクロール<br>
    最後までスクロール<br>
    最後までスクロール<br>
    最後までスクロール<br>
    最後までスクロール<br>
    最後までスクロール<br>
</div>
<div id="result" class="disabled">
    最後までスクロールしました！
</div>

CSS

#scroll {
    height: 200px;
    background-color: pink;
    overflow: scroll;
    margin: 10px;
    padding: 10px;
}

.disabled {
    color: lightgray;
}

JavaScript

var height = $('#scroll').outerHeight();
$('#scroll').on('scroll', function() {
    if((this.scrollTop + height) == this.scrollHeight) {
        $('#result').removeClass('disabled');
    }
});