我开发了这个 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;
如果(getHeight > 750)
。我在我的 iPad 上以纵向模式对此进行了测试,虽然屏幕高度在技术上是 768px,但 URL 栏和顶部菜单占大约 44px,因此条件“IF” block 返回 false,并且代码没有执行。将数字降到 600 后,我再次测试,一切正常。
关于javascript - Mobile Safari 视差滚动不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30810212/