Mobile Safari parallax scroll not working

我開發了這個JavaScript代碼來在頁面頂部的圖像上進行視差滾動。該代碼在Chrome，FF，IE，Opera和Safari桌面上完美無缺地工作。當我在iPad上的Safari上測試它時，它忽略了所有視差滾動的視差，並且通常只是滾動通過圖像。我試圖從我的iPad上進行調試，但由於我有一臺Windows電腦，似乎無法正常工作。有沒有人看到任何理由爲什麼這不適用於移動Safari？注意：我也嘗試從另一個StackOverflow文章實現background-position-x和background-position-y，但它根本沒有幫助。Mobile Safari parallax scroll not working

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>

來源

2015-06-12 SpiderMan

可以請您添加相關的HTML？ – Downgoat

@ vihan1086我已經爲您添加了相關的html。 – SpiderMan

您最好的選擇是通過檢測鼠標/觸摸開始和結束來製作您自己的滾動引擎。 Safard在滾動時不運行代碼 – Downgoat

在檢查了我的代碼之後，我發現這行代碼阻止了JavaScript執行：var getHeight = window.innerHeight; if (getHeight > 750)。我在縱向模式下在iPad上測試了這個功能，而屏幕高度在技術上是768px，頂部菜單的URL欄&約佔44px，因此條件「IF」塊返回false，代碼沒有執行。將數字降至600後，我再次進行了測試，一切都很順利。

來源

2015-06-12 19:56:43 SpiderMan

的問題是，在滾動移動Safari瀏覽器不執行代碼。

當我製作一個在Mobile Safari上運行的JavaScript遊戲時，我想到了這一點。但是如果我刷卡，它會滾動頁面，定期停止遊戲。

另一個示例：動畫GIF在您滾動時停止動畫。

不幸的是，你無法避開。

來源

2015-06-12 19:33:09

Mobile Safari parallax scroll not working

回答

相關問題