移动Safari视差滚动无法正常工作

时间:2015-06-12 18:50:01

标签: javascript jquery ios css mobile-safari

我开发了这个JavaScript代码,在页面顶部的图像上进行视差滚动。该代码在桌面上的Chrome,FF,IE,Opera和Safari中完美运行。当我在iPad上的Safari上测试时,它会忽略视差滚动,并且只是滚动通过图像。我曾尝试从我的iPad进行调试,但它似乎没有用,因为我有一台Windows电脑。有没有人看到为什么这不适用于移动Safari?注意:我还尝试从其他StackOverflow帖子中实现background-position-xbackground-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>

2 个答案:

答案 0 :(得分:1)

在审核了我的代码后,我发现这行代码阻止了JavaScript执行:var getHeight = window.innerHeight; if (getHeight > 750)。我在我的iPad上以纵向模式测试了这个,虽然屏幕高度在技术上是768px,但是URL条和&amp;顶级菜单约占44px,因此有条件的IF&#39; block返回false,代码没有执行。在将数字降低到600之后,我再次进行了测试,一切看起来都很顺利。

答案 1 :(得分:0)

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

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

另一个例子:动画GIF在滚动时停止动画。

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