1

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?

user844621
  • 83
  • 1
  • 7

2 Answers2

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 :)

user844621
  • 83
  • 1
  • 7
  • 1
    I added a window.scrollTo(0, 1); to your fiddle: http://jsfiddle.net/xK7U2/23/ No more Jumping scrollbar! Well done! – BoatCode Jun 04 '14 at 13:55
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.

BoatCode
  • 570
  • 5
  • 14
  • 1
    Thanks for answering. You're right, the scrollbar changes the image as expected when scrolling past 250px. I didn't dispute this. The problem I'm trying to solve is the fact that the scrollbar randomly jumps back to the left sometimes when the image changes. As I said, you might have to scroll a few times for this to happen. I'm trying to work out why this is happening and how to prevent it. – user844621 Jun 03 '14 at 22:43
  • when I tried it the scrollbar jumped back EVERY time I scrolled past 250px. – BoatCode Jun 04 '14 at 13:42