I'm using jquery backstretch and horizontal scrolling. Why does it jump back to the left when I call $.backstretch('next')?

Question

I've recreated a very stripped back version of what I'm doing here:

http://jsfiddle.net/xK7U2/11/

html:

<div class="placeholder"></div>

css:

html,
body {
    width: 100%;
    height: 100%;
}

.placeholder {
    width: 300%;
    height: 100%;
    background: rgba(0,0,0,0.2);
}

js:

$(function() {

    $.backstretch(
      [
          'http://lorempixel.com/1000/1000/',
          'http://lorempixel.com/1200/1000/',
          'http://lorempixel.com/1000/1200/'
      ]
    );

    $.backstretch("pause");

    $(window).scroll(function (e) {
        if ($(window).scrollLeft() > 250) {
            $.backstretch("next");
        }
    });

});

When you scroll horizontally past 250px it (sometimes) jumps the scrollbar left back to the start when the backstretch image changes. You may have to try it a few times before it happens.

Can anyone tell me why and how I might prevent this from happening?

Answer 1

Backstretch will resize the image based on the available space. a scrollbar seems incompatible with its functionality. Your app, however, seems to behave exactly as I'd expect. When you scroll past 250 px the image changes... Your scrollbar is just an activator for your if statement and nothing else.

If you are determined this should work... there might be a prevent default method to keep your scrollbar from resizing.

Answer 2

I've found the problem:

backstretch has this code to fix an ios problem:

/*
 * Scroll the page one pixel to get the right window height on iOS
 * Pretty harmless for everyone else
 */
if ($(window).scrollTop() === 0 ) {
  window.scrollTo(0, 0);
}

Because we're scrolling horizontally and not vertically, scrollTop() is always 0, so it always scrolls back to 0,0

Although I doubt anyone else will find this problem, hopefully this will help someone in the future :)