Difference between scroll functions?

Asked

Viewed 200 times

8

Is there any difference in using: 

$(window).scrollTop(_Altura_);

Or

window.scroll(0,_Altura_);

Other than controlling the position of the horizontal axis? (consider _Altura_ as a variable)

javascript

  • One is jQuery function and another is JS vanilla. What kind of comparison do you want to make? Only in matters of results or also performance?

  • Results and performance, but I think the result will be the same no ?

1 answer

5


Both generate the same result the difference is that the function jQuery .scrollTop uses the window.scrollTo to execute which is the same as Window.scroll().

So we can conclude that the window.scroll will have a faster performance to be JS pure.

window.scroll -> window.scrollTo is effectively the same as this method.

Another point is that the function of jQuery, .scrollTop(), works with any element of GIFT and can also work as getter when no parameter is passed, already the vanilla, scroll, has no return and is applied to the object Window.

$(() => {
  $("#window").on("click", event => {
    $(window).scrollTop(100);
  });
  
  $("#div").on("click", event => {
    $("div.demo").scrollTop(300);
  });
});
body {
  height: 1000px;
}

div.demo {
  border: 1px dashed red;
  height: 100px;
  overflow: auto;
}

div.demo p {
  height: 300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="window">Scroll na window</button>
<button id="div">Scroll no elemento</button>
<div class="demo">
  <p>Stack Overflow em Português</p>
  <span>Estou a 300px do topo.</span>
</div>

  • It might be worth commenting that jQuery’s function, scrollTop, works also as getter when no parameter is passed, the vanilla, scroll, no return.

  • I added in the reply

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.