0

Eu não sou capaz de entender este código jQuery.

Como posso converter o seguinte código em JavaScript?

$(document).ready(function() {
    $("#table").scroll(function() { 
        if ($(this).scrollTop() + $(this).height() == $(this).get(0).scrollHeight) {
            console.log("final")
        } 
    }); 
});
13
  • 2
    Fazer isso sem o jQuery seria um tanto trabalhoso e complicado, embora perfeitamente possível. Não prefere aprender como o jQuery funciona ao invés de como você o eliminaria? Commented 6/07/2018 às 14:05
  • 2
    Não posso usar framework, tenho que usar javascript puro Commented 6/07/2018 às 14:06
  • 2
    Acredito que alguém vá responder a pergunta pra você, mas mais importante de ter uma resposta pra isso, já vou avisar: Se você usa jQuery, e não sabe como fazer com o Javascript, eu acredito que esse seja um problema. Commented 6/07/2018 às 14:09
  • 3
    Você sabe o que esse código está fazendo? Commented 6/07/2018 às 14:11
  • 3
    Como o @WallaceMaxters comentou, se você não sabe o que o código faz não é uma ajuda para converter o código, mas sim, "convertam esse código para mim", e mesmo em javascript puro vai continuar sem entender, seria legal debugar e ver o que cada parte faz, dai você provavelmente vai conseguir converter na próxima vez :) Commented 6/07/2018 às 14:29

1 Resposta 1

3

Acho que algo mais aproximado seria como abaixo, mas precisaria de saber de mais detalhes sobre porque precisa desse código.

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

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

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

})

Só uma pequena correção: jQuery é Javascript, não é uma linguagem. No caso, você não está "convertendo para javascript", e sim usando o Javascript puro, sem a biblioteca.

Fiz um exemplo melhor para poder conferir:

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>

14
  • 2
    Até que não ficou tão complicado quanto eu imaginava que ficaria. Commented 6/07/2018 às 14:22
  • 2
    Como eu comentei acima: Jquery não é um framework, é uma biblioteca. Lembrando que querySelector só esta disponivel depois do IE9, mas como estamos em 2018, ninguém mais se importa. :) Commented 6/07/2018 às 14:37
  • 1
    @WilliamJohnAdamTrindade já que tocou no assunto: pt.stackoverflow.com/questions/17501 Commented 6/07/2018 às 14:49
  • 2
    @WallaceMaxters que tal trocar window.addEventListener('load' por document.addEventListener('DOMContentLoaded'?
    – Syzoth
    Commented 6/07/2018 às 15:00
  • 1
    @WilliamJohnAdamTrindade você disse IE9, nesse não tem notas no caniuse, logo o comentário ainda estava errado, desculpe a correção prévia, mas é isso. Fora que se ler a nota de implementação parcial não quer dizer que não funciona, ou que funcione 10%, considerando os seletores suportados pelo CSS do IE8 mesmo, provavelmente o parcial ali é um suporte de 90%, tanto que basta ler a nota, o problema do IE8 é somente com tags não reconhecidas (tags do HTML5 por exemplo, o que era um problema do motor CSS no IE8 também, assim como no motor JS), ou seja outros seletores validos no IE8 será Ok ;)
    – Syzoth
    Commented 6/07/2018 às 15:17

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .