How to detect when scrolling an element comes to the end without jQuery?

Question

How to detect when scrolling an element comes to the end without jQuery?

Navigation

#1 by (3 votes)

0

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")
        } 
    }); 
});

javascript jquery

asked by anonymous 06.07.2018 / 16:04

1 answer

Logic error shell script IF record = X, LEFT JOIN in table 1, IF record = Y, LEFT JOIN in table 2

score 3 · Accepted Answer

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 little fix: jQuery is Javascript, not a language. In the case, you are not "converting to javascript", but using pure Javascript without the library.

I've done a better example to check out:

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>