var height = $('#scroll').outerHeight(); $('#scroll').on('scroll', function() { if((this.scrollTop + height) == this.scrollHeight) { $('#result').removeClass('disabled'); } });
<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>
#scroll { height: 200px; background-color: pink; overflow: scroll; margin: 10px; padding: 10px; } .disabled { color: lightgray; }