移动Safari视差滚动不起作用

Question

我开发了此JavaScript代码，以便在页面顶部的图像上进行视差滚动。 该代码可在台式机上的Chrome，FF，IE，Opera和Safari中完美运行。 但是，当我在iPad上的Safari上对其进行测试时，它会忽略视差的全部滚动，而只是正常滚动经过图像。 我曾尝试通过iPad进行调试，但由于我有一台Windows计算机，因此似乎无法正常工作。 有没有人看到任何原因不能在移动Safari上使用？ 注意：我还尝试从另一个StackOverflow帖子中实现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

在检查了更多代码之后，我发现以下代码行阻止了JavaScript的执行： var getHeight = window.innerHeight; if (getHeight > 750) var getHeight = window.innerHeight; if (getHeight > 750) 。 我在纵向模式下在iPad上进行了测试，技术上说，屏幕高度为768px，URL栏和顶部菜单大约占44px，因此条件“ IF”块返回false，并且代码未执行。 将数字降低到600后，我再次进行了测试，一切似乎都很好。

Answer 2

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

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

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

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