移动野生动物园视差滚动不起作用

Mobile Safari parallax scroll not working

本文关键字：滚动 不起作用 视差 动物园 移动      更新时间：2023-09-26

我开发了这个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>

在进一步查看我的代码后，我发现这行代码阻止了 JavaScript 的执行：var getHeight = window.innerHeight; if (getHeight > 750) 。 我在iPad上以纵向模式对此进行了测试，虽然屏幕高度在技术上是768px，但URL栏和顶部菜单约占44px，因此条件"IF"块返回false，并且代码没有执行。 将数字降至 600 后，我再次进行了测试，一切似乎都很好。

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

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

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

不幸的是，你无法绕过它。

相关文章：