Home › Forums › JavaScript › Why can't JS scroll as smoothly as jQuery?
- This topic is empty.
-
AuthorPosts
-
February 19, 2015 at 5:43 pm #196356
randomdude
ParticipantI’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?February 27, 2015 at 9:22 am #196939Shikkediel
ParticipantI’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?
February 28, 2015 at 4:58 pm #197028Shikkediel
ParticipantI think I get the gist… I remember spending a lot of time trying to make the distinction if
html
orbody
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).March 10, 2015 at 10:30 pm #197852Shikkediel
ParticipantI found a way to distinguish whether
html
orbody
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).
March 14, 2015 at 3:05 am #198124Shikkediel
ParticipantSo 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 :
March 14, 2015 at 7:17 am #198146randomdude
Participant@shikkediel Wow, I guess not. I didn’t realize the question I was asking was that hard!
Thanks for helping @all! :)
March 15, 2015 at 3:43 am #198196Ilan Firsov
Participant@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
March 15, 2015 at 7:17 am #198209Shikkediel
ParticipantThanks 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…March 20, 2015 at 6:29 pm #198681Shikkediel
ParticipantLol, that question on SO triggered the Tumbleweed badge (like a ghost town in the old west).
March 20, 2015 at 7:46 pm #198682randomdude
Participant@shikkediel Wow :)
I’m surprised no one answered it.March 20, 2015 at 8:09 pm #198683Shikkediel
ParticipantMe 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. -
AuthorPosts
- The forum ‘JavaScript’ is closed to new topics and replies.