title: I'm using jquery backstretch and horizontal scrolling. Why does it jump back to the left when I call $.backstretch('next')?
body: <p>I've recreated a very stripped back version of what I'm doing here:</p>
  
  <p><a href="http://jsfiddle.net/xK7U2/11/" rel="nofollow">http://jsfiddle.net/xK7U2/11/</a></p>
  
  <p>html:</p>
  
  <pre><code>&lt;div class="placeholder"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>html,
  body {
      width: 100%;
      height: 100%;
  }
  
  .placeholder {
      width: 300%;
      height: 100%;
      background: rgba(0,0,0,0.2);
  }
  </code></pre>
  
  <p>js:</p>
  
  <pre><code>$(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() &gt; 250) {
              $.backstretch("next");
          }
      });
  
  });
  </code></pre>
  
  <p>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.</p>
  
  <p>Can anyone tell me why and how I might prevent this from happening?</p>