How to detect when the scroll of an element reaches the end without jQuery?

Question

I’m not able to understand this jQuery code.

How can I convert the following code into Javascript?

$(document).ready(function() {
    $("#table").scroll(function() { 
        if ($(this).scrollTop() + $(this).height() == $(this).get(0).scrollHeight) {
            console.log("final")
        } 
    }); 
});

Answer 1

I think something closer would be like below, but I would need to know more details about why you need this code.

window.addEventListener('load', function () {

    document.querySelector("#table").addEventListener('scroll', function() { 

        if (this.scrollTop + this.offsetHeight == this.scrollHeight) {
               console.log('final')
        } 
    }); 

})

Just a small fix: jQuery is Javascript, not a language. In this case, you are not "converting to javascript", but using pure Javascript without the library.

I made a better example to check:

window.addEventListener('load', function () {

    document.querySelector("#table").addEventListener('scroll', function() { 
    
        if (Math.ceil(this.scrollTop) + this.offsetHeight == this.scrollHeight) {
               console.log('final')
        } 
    }); 

})

#table{
   max-height: 150px;

   background-color: #ddd;
   
   overflow: auto;
}

<div id="table">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>