1

ここで行っていることの非常に簡素化されたバージョンを再作成しました。

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");
        }
    });

});

250px を超えて水平方向にスクロールすると、バックストレッチ画像が変更されたときに、(時々) スクロールバーが左にジャンプして最初に戻ります。そうなる前に、何度か試してみる必要があるかもしれません。

これが起こらないようにする理由と方法を誰か教えてもらえますか?

4

2 に答える 2

2

私は問題を見つけました：

backstretch には、ios の問題を修正するための次のコードがあります。

/*
 * 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);
}

垂直方向ではなく水平方向にスクロールしているため、scrollTop() は常に 0 であり、常に 0,0 に戻ります。

他の誰かがこの問題を見つけるとは思えませんが、うまくいけば、これは将来誰かを助けるでしょう:)

于 2014-06-04T08:47:06.487 に答える
1

バックストレッチは、利用可能なスペースに基づいて画像のサイズを変更します。スクロールバーはその機能と互換性がないようです。ただし、アプリは期待どおりに動作するようです。250 px を超えてスクロールすると、画像が変化します... スクロールバーは、if ステートメントの単なるアクティベーターであり、他には何もありません。

これが機能すると判断した場合...スクロールバーのサイズが変更されないようにするためのデフォルトの方法があるかもしれません。

于 2014-06-03T20:12:23.930 に答える