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

});

当您水平滚动超过 250 像素时，它（有时）会在后伸图像更改时将滚动条向左跳回到起点。在它发生之前，您可能需要尝试几次。

谁能告诉我为什么以及如何防止这种情况发生？

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

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

如果您确定这应该可以工作......可能会有一种阻止默认方法来阻止您的滚动条调整大小。

于 2014-06-03T20:12:23.930 回答