Mobile Safari 视差滚动不起作用

Question

我开发了这个 JavaScript 代码来在页面顶部的图像上进行视差滚动。该代码在桌面上的 Chrome、FF、IE、Opera 和 Safari 中完美运行。但是，当我在我的 iPad 上的 Safari 上对其进行测试时，它会完全忽略视差滚动，而只是正常滚动经过图像。我曾尝试从我的 iPad 进行调试，但它似乎不起作用，因为我有一台 Windows 计算机。有谁知道为什么这在移动 Safari 上不起作用？注意：我也尝试从另一个 Whosebug post 实现 background-position-x 和 background-position-y，但它根本没有帮助。

JS代码：

   var getHeight = window.innerHeight;
    if (getHeight > 750) {
        $('#bannerImage').each(function () {
            var $obj = $(this);

            $(window).scroll(function () {

                var yPos = -($(window).scrollTop() / 5);
                var xPos = -($(window).scrollLeft() / 5);
                var bgpos = yPos + 'px';
                var bgposx = xPos + 'px';
                var coordinates = bgposx + ' ' + bgpos;

                $("div#slideshow div img").css('background-position', coordinates);
                $("div#slideshow div img").css('background-position-x', bgposx);
                $("div#slideshow div img").css('background-position-y', bgpos);

            });
        });
    }
});

HTML:

<div class="BannerContainer">
<div class="vibeBannerRotator">
<div id="bannerImage">
<div id="slideshow">
<div id="imgContents_1">
<img style="background-image: url('/Images/ssie_images/SSIE-Header01.jpg'); background-repeat: no-repeat; background-size: 100%;">
</div>
</div>
</div>
</div>
</div>

Answer 1

问题是 Mobile Safari 在滚动时不执行代码。

我在制作一个在 Mobile Safari 上运行的 JavaScript 游戏时发现了这一点。但如果我滑动，它会滚动页面，定期停止游戏。

另一个示例：动画 GIF 在您滚动时停止动画。

不幸的是，你无法解决这个问题。

Answer 2

进一步检查我的代码后，我发现这行代码阻止了 JavaScript 的执行：var getHeight = window.innerHeight; if (getHeight > 750)。我在我的 iPad 上以纵向模式测试这个，虽然屏幕高度在技术上是 768px，但 URL 栏和顶部菜单占大约 44px，因此条件 'IF' 块返回false，代码没有执行。把数字降到600后，我又测试了一下，一切正常。

Mobile Safari 视差滚动不起作用

Mobile Safari parallax scroll not working

javascript

css

jquery

mobile-safari

ios