移动 Safari 视差滚动不起作用

Posted 2023-03-14

【中文标题】移动 Safari 视差滚动不起作用

【英文标题】：Mobile Safari parallax scroll not working

【发布时间】：2015-06-12 18:50:01

【问题描述】：

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

【问题讨论】：

能否请您添加相关的HTML？

@vihan1086 我已经为你添加了相关的html。

最好的办法是通过检测鼠标/触摸的开始和结束来制作自己的滚动引擎。 Safard 在滚动时不运行代码

【参考方案1】：

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

【参考方案2】：

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

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

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

很遗憾，你无法解决这个问题。