Question

我正在使用Skrollr库来构建Parallax网站，但是当在移动设备上查看时，我得到了混合结果。在iPhone上，视差效果有效，但在桌面上观看时，图像的位置与完全不同。

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

稍微烦人的是，我从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();

Answer 1

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

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

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

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

这是我的示例项目，您可以找到它here。

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

Skrollr视差无法在iOS和Android设备上运行

示例网址

HTML

CSS

JS

1 个答案: