$(“body”).scrollTop() doesn't update in safari

I'm working on a website:

http://beta.projektopia.se/

the body has several background-images that are updated on scroll like this:

$(document).ready(function(){

    $(document).scroll(function(){
        var scrollfactor=$("body").scrollTop()*0.2;
        var centerscrollpos =scrollfactor+613;
        var docheight = $(document).height();
        var windowheight = $(window).height();
        var bottompos = (docheight-980)-((docheight-windowheight)*0.2)+scrollfactor;
        var scrollpos = 'center '+scrollfactor+'px,center '+bottompos+'px, center '+ centerscrollpos+'px,center 0px';
        $("body").css("background-position", scrollpos);
    });
});

Lots of calculations, but the important thing is that a scrollpos is created that should change the position of the background when you scroll, to create a parallax-effect. It works great in chrome, but in firefox, the variable scrollfactor, that is suppose to get the current scroll-position, doesn't update.

ps, some people have this issue due to lack of correct doctype. I believe i have declared it correctly like this:

<!DOCTYPE html>

Answers:

Answer

The scrollTop jQuery method has been known to be problematic.

Depending on the browser, you may need to use $('html, body').scrollTop() or $(document).scrollTop() or $(window).scrollTop().

Answer

For me, the problem was any kind of overflow property on html element. The moment I removed it, my .scrollTop() started working as it should. I still wanted global overflow-x: hidden property on my page, so I just set it on body element.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us Javascript

©2020 All rights reserved.