iOS上的垂直滾動動畫'跳轉'

我正在使用使用CSS3動畫的site。iOS上的垂直滾動動畫'跳轉'

我注意到iOS上的漫畫字幕「跳躍」，我認爲這是由地址欄更改用於計算字幕位置的window properties之一引起的。

的源代碼可以在這裏找到：https://gitlab.com/ashleyconnor/adventurersclubcomic

如果我在我的假設是正確的。有沒有一種準確的方法來抵消iOS地址欄，所以這些值中沒有任何跳躍（突然增加）？

來源

2017-09-04 Ash

不知道這是否有助於您的調試，但如果您在Edge中使用頁面向上翻頁和向下翻頁，您還有一個重大的跳躍問題。我猜猜這可能是同一個問題。可能是你的視差代碼中的一個錯誤。 – k2snowman69

PgUp/Down適用於OSX上的Chrome和Safari，但很有用。我在這個項目上提出了一個問題。謝謝。 – Ash

請記住，如果我獲得了您提交的問題的鏈接？ – k2snowman69

我克隆了您的回購，並且能夠在Firefox和Chrome中重現窗口調整大小的抖動。經過幾分鐘的調試，我認爲問題實際上是在你的index.js文件中。

每當窗口調整大小時，您都會完全刷新enllax插件。這似乎是不必要的。

如果去除多餘的調用像這樣enllax功能：

$(document).ready(function() { 
// function enllax() { 
    $('#start').enllax({ 
     type: 'foreground', 
     ratio: 0.5, 
     direction: 'vertical' 
    }); 
// $(window).scroll(); 
// }; 

    $('#begin').click(function() { 
     $('html, body').animate({ 
      scrollTop: $("#panel1").offset().top 
     }, 1000); 
    }); 

// enllax(); 

    // And trigger the scroll event on resize to deal with changes 
    // in the responsive layout 
    $(window).on('resize', $(window).trigger('scroll')); 
});

隨着該更新，抖動的調整大小停在我已安裝的所有瀏覽器。它仍然需要在iOS上測試，因爲我沒有任何Apple硬件來測試它，但我懷疑它也應該修復那裏的問題。

來源

2017-09-12 01:56:17 LightBender

看起來像是修復了它。謝謝！ – Ash

高興地幫助:) – LightBender

iOS上的垂直滾動動畫'跳轉'

回答

相關問題