0

我正在使用Skrollr库来构建一个 Parallax 网站，但是在移动设备上查看时，我得到的结果好坏参半。在 iPhone 上，视差效果很有效，但图像的位置与在桌面上查看时的位置完全不同。

在 Android 上，视差效果根本不起作用。

有点烦人，因为我从 Skrollr 网站下载的示例也不能在手机上运行，​​但主要的 Skrollr 网站确实可以工作。

有什么明显的我错过的东西会阻止该网站在手机上运行吗？

示例网址

http://wickywills.com/testing/skrollr/simple-parallax.html

HTML

<div id="skrollr-body">

<div id="slide-1" class="slide"
    data-center="background-position: 0% 0px;"
    data-top-bottom="background-position: 0% -200px;">
    <p>slide 1</p>
    <p>slide 1</p>
    <p>slide 1</p>
    <p>slide 1</p>
    <p>slide 1</p>
    <p>slide 1</p>
    <p>slide 1</p>
    <p>slide 1</p>
</div>

<div id="slide-2" class="slide"
    data-0-bottom-top="background-position: 0% 0px;"
    data-0-top-bottom="background-position: 0% -300px;">
    <p>slide 2</p>
    <p>slide 2</p>
    <p>slide 2</p>
    <p>slide 2</p>
    <p>slide 2</p>
    <p>slide 2</p>
    <p>slide 2</p>
    <p>slide 2</p>
</div>

<div id="slide-3" class="slide"
    data-center="background-position: 0% 0px;"
    data-top-bottom="background-position: 0% -100px;"
    data-anchor-target="#slide-3">
    <p>slide 3</p>
    <p>slide 3</p>
    <p>slide 3</p>
    <p>slide 3</p>
    <p>slide 3</p>
    <p>slide 3</p>
    <p>slide 3</p>
    <p>slide 3</p>
</div>

</div>

<script src="scripts/jquery.skrollr.min.js"></script>

CSS

#slide-1 { background: url(images/bg-spinnaker.jpg) fixed center center no-repeat; }
#slide-2 { background: url(images/bg-city.jpg) fixed right center no-repeat; }
#slide-3 { background: url(images/bg-laptop.jpg) fixed center center no-repeat; }
.slide { border-bottom: 5px solid #00f; min-height: 600px; }

JS

var s = skrollr.init();
4

1 回答 1

2

您好，我认为我们面临同样的问题。几天前，我遇到了像你这样的问题。

我已经在 stackoverflow 和 skrollr github 本身中进行了搜索。然后我意识到在 skrollr github 中说你不能拥有position: fixed.

因此，请尝试更改您的代码，而不是尝试使用“%”更改您的“px”来data-center="background-position: 0% 0px;"更改它。data-0-bottom-top="background-position: 0% 0%;我认为（我仍然假设）“px”将定义为固定位置，我们不想要固定位置。

并且不要在你的 CSS 上使用固定的背景附件。

这是我的示例项目，你可以在这里找到它。

我希望这个答案能有所帮助。谢谢你。

于 2014-05-09T05:22:44.557 回答