Javascript Skrollr视差在iOS和Android设备上不工作

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

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

我从Skrollr网站下载的示例在手机上也不起作用，但Skrollr主网站确实起作用，这有点令人恼火

是否有任何明显的，我错过了，将阻止从手机上工作的网站

示例URL

---

HTML JS

---

你好，我想我们面临着同样的问题。几天前，我和你一样有问题

我已经搜索了stackoverflow和skrollr github本身。然后我意识到在skrollr中github说你不能有

位置：fixed

因此，试着用

data center=“background position:0%0px；”“

试着用

data-0-bottom-top=“background position:0%0%”来更改代码。

用“%”来更改您的“px”。我认为（我仍然认为）“px”将定义为固定位置，我们不想要固定位置

不要在css上使用固定的背景附件

这是我的样本项目，你可以找到它

---

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

尽管移动设备上不支持

背景位置：fixed

，但它肯定不会与skrollr一起工作，因为skrollr的主体是使用CSS转换进行转换的。在使用CSS转换的元素中，根据CSS规范，固定位置根本不起作用。@Prinzhorn-I“我知道这一点，但Skrollr网站在触摸设备（带视差）上运行得非常好-我只是希望我的简化版也能在基于触摸的设备上运行。从Skrollr网站下载的示例也不能正常工作，这也于事无补：（请看skrollr页面的代码。它没有使用

背景附件：修复

谢谢uyea，您的网站示例似乎工作得很好。它在iPhone上有时会有点奇怪地滚动，但它比我迄今为止看到的任何东西都要近！

<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>

#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; }

var s = skrollr.init();