Responsive setting creates page scrolling issues

Question

I'm having issues with my CarouFredSel carousel.

I have a (tall) one pager with a carousel inside. If I scroll below it, any browser resize will make the page scroll back up about one page (I'm estimating the height of the carousel). I understand a few pixels of twerking, but now that's about 1000...

The problem is, I'd be 'fine' with it if it was only on resize, but this problem reproduces on reaching the bottom of the page on mobile, without any kind of resizing, no screen rotation (on Android, at least, cannot test iOS right now..). And like I explained, I reproduced the problem with slightly resizing a desktop browser on reaching the bottom of the page.

On disabling CarouFredSel, the problem goes away. It also goes away on disabling the responsive option on it.

carouFredSel is initiated like so :

$("#modeles").carouFredSel({
    responsive: true,
    scroll: {
        fx: "crossfade",
        duration: 500
    },
    direction: "left",
    items: {
        visible: 1,
        width: 868
    },
    auto: false
}, {
    transition: true
});

I have created a JS fiddle reproducing the issue here.

It's more than a few pixels. Open JS fiddle and scroll down to the bottom of the view, and resize the view horizontally. — veksen
Not sure why the title was edited? How is the title not relevant to CarouFredSel? "responsive setting" doesn't mean anything if I'm not talking about CarouFredSel, there are many ways to implement responsive boxes, and none of them ever triggered such a glitch. So.....? — veksen

jQuerybeast jQuerybeast · Accepted Answer · 2013-11-15T19:35:41

Okay so I get alot of these few 'tricky' stuff and what I oftenly do, I back it up with javascript.

In your case, what causes all the problem is Google Maps and the content of the iframe to be more specific.

What I would do in your case - of which does works perfectly - I would set an attribute of the scroll position on scroll, and on resize get me to that scroll position.

That said, we have this:

$(window).scroll(function () {
    $("body").attr("xheight",$(document).scrollTop());
});

$(window).on("resize", function(e){
    e.preventDefault();
    $(document).scrollTop($("body").attr("xheight"))
});

And that's all you need.

Given example: jsFiddle

Responsive setting creates page scrolling issues

1 Answers