Why can't JS scroll as smoothly as jQuery?

[randomdude]

I’m using this smooth scroller widget from Chris Coyier on my website, and it’s the only thing on the entire page that I’m not able to convert to pure JS. Since I’m trying to stop using jQuery for the site, I’ve been trying to find a JS solution that scrolls smoothly, but they’re all very jerky.
Does anyone know why there aren’t any non-jQuery solutions that are as smooth as the jQuery thing, and does anyone know of a JS solution that actually scrolls smoothly?

[Shikkediel]

I’ve been reading along and googling as well. Not having any brilliant ideas though. How about the suggestion I also saw on SO – to have a peek at how jQuery handles it (only the plain underlying code of course)?

http://jqueryjs.googlecode.com/svn/tags/1.3.2/src/offset.js

To be honest, I’m not sure what’s ‘wrong’ with Shane’s latest pen. Could you maybe elaborate on what the bottleneck still is?

[Shikkediel]

I think I get the gist… I remember spending a lot of time trying to make the distinction if html or body needs to be addressed in jQuery because with that you’re basically forced to do the same thing when animating, such as $(html, body). Didn’t get to the bottom of it (haven’t seen a clean solution anywhere else either). I was logging the digits that were output (I think all browsers generate it for both elements so they’re never undefined) but making sense of that reminds me of the movie I watched last night. It would be an interesting one to solve though (and I knew very little about JS at the time in any case).

[Shikkediel]

I found a way to distinguish whether html or body is being scrolled but it won’t win a beauty contest. Scrolling a single pixel on doc ready and checking which element value exists :

$('html, body').scrollTop(1);
if ($('html').scrollTop()) { // FF and IE }
if ($('body').scrollTop()) { // Chrome and Opera }

Seems to always return the correct element (don’t mine me using some jQuery here). Gotta be done early though because all browsers ‘remember’ if the page was scrolled down previously. Firefox always scrolls back up if you ask it to but IE will target the previous position when the page reloads and Opera’s even more stubborn about it by default. So offset will not always be constant.

Any other ideas are welcome (still puzzling this one together).

[Shikkediel]

So I posted the same question on Stackoverflow and didn’t even get as much as half a comment. I guess it’s safe to say then that there aren’t many well-known solutions around for this :

Topic link (with a slightly neater jQuery approach)

[randomdude]

@shikkediel Wow, I guess not. I didn’t realize the question I was asking was that hard!

Thanks for helping @all! :)

[Ilan Firsov]

@shikkediel Maybe run your test only the time the page loads:

$(document).ready(function() {
    if ($('html').scrollTop()) $('html').addClass('scrolltop-target'); // FF and IE
    if ($('body').scrollTop()) $('body').addClass('scrolltop-target'); // Chrome and Opera
});

And then you don’t have to test for that again:

$('.scrolltop-target').animate({scrollTop: 1}, 0);

Still not the best, but it’s a lot more neater than testing this every single time

[Shikkediel]

Thanks for the brainstorm, @Ilan Firsov. I think the above won’t work though because both if statements will return zero if the single pixel wasn’t scrolled first. Even though this test will generally have a good result, I think it’s lacking elegance. But I guess a pretty solution isn’t always possible…

[Shikkediel]

Lol, that question on SO triggered the Tumbleweed badge (like a ghost town in the old west).

[randomdude]

@shikkediel Wow :)
I’m surprised no one answered it.

[Shikkediel]

Me too, I can’t imagine no one cares about it (it’s very common using animate()) so it must really be because of a lack of alternatives.

I was messing around with the scroll function earlier this week by the way – and I’m wondering if in this case the double request could maybe be replaced by using window.scrollTo(x, y) instead. Admittedly I’m not completely seeing through the function @shaneisme made.

[Author]

Posts