Skrollr視差無法在iOS和Android設備上運行

Question

我正在使用Skrollr庫來構建Parallax網站，但是當在移動設備上查看時，我得到了混合的結果。 在iPhone上，視差效果有效，但在桌面上觀看時，圖像的位置與完全不同。

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

稍微煩人，因為我從Skrollr網站下載的示例也不適用於手機，但主要的Skrollr網站確實有效。

有什么明顯的我錯過了會阻止該網站在手機上工作嗎？

示例URL

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();

Answer 1

您好我們正面臨同樣的問題。 在幾天前，我遇到了像你這樣的問題。

我已經在stackoverflow和skrollr github本身中搜索了。 然后我意識到在skrollr github說你不能有position: fixed 。

因此，請嘗試更改代碼，而不是使用data-center="background-position: 0% 0px;" 嘗試用data-0-bottom-top="background-position: 0% 0%;更改它data-0-bottom-top="background-position: 0% 0%;用”％“改變你的”px“。我認為（我仍然認為）”px“將定義為固定位置，我們不想要固定的位置。

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

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

我希望這個答案能有所幫助。 謝謝。