Question

我重新创建了一个非常剥离的版本，我在这里做了什么：

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时，它（有时）会在后伸图像发生变化时将滚动条向左跳回到开始位置。在发生之前，您可能需要尝试几次。

任何人都可以告诉我为什么以及如何防止这种情况发生？

Answer 1

我发现了问题：

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

虽然我怀疑其他人会发现这个问题，但希望这将有助于未来的人：）

Answer 2

Backstretch将根据可用空间调整图像大小。滚动条似乎与其功能不兼容。但是，您的应用似乎完全符合我的预期。当您滚动超过250像素时，图像会发生变化...您的滚动条只是if语句的激活器而没有别的。

如果你确定这应该有用......可能有一种防止默认方法来防止你的滚动条调整大小。

我正在使用jquery backstretch和水平滚动。当我拨打$ .backstretch（'next'）时为什么会跳回到左边？

2 个答案: