跨瀏覽器友好，多頁全屏，滾動到佈局

我有一個簡單的2頁面佈局，我想創建我遇到的一些問題創建。跨瀏覽器友好，多頁全屏，滾動到佈局

兩頁都佔用頁面的全部寬度和高度。第二頁存在，但隱藏在屏幕上方（垂直）第一頁。點擊一個按鈕後，第一頁向下移動，第二頁從上面下移。

我的第一次嘗試涉及2個絕對定位框。即

#page1, #page2 { position: absolute; width: 100%; height: 100%; } 
#page2 { margin-top: -100%; }

從結構上說，這可以在Chrome中使用。＃page2離開屏幕並且page1可見。不幸的是，它對其他用戶來說並不那麼好。

在點擊一些簡單的jQuery我的按鈕，我的動畫的CSS像這樣：

$('#learnmore').click(function(){ 

    $('#page1').animate({'margin-top':'100%'},500); 
    $('#page2').animate({'margin-top':'0'},500); 
});

因此，基本上，第1頁增加了100％，第2頁的保證金被移除的餘量。這在我的電腦上運行正常，但其他用戶報告了問題。我認爲它必定是我的佈局的結構性問題。

在我看來，不同的瀏覽器不喜歡寬度：100％和高度：100％，並創造了一些意想不到的結果。這是真的？

什麼是更好的方式來實現這一點，以便第二頁隱藏在屏幕之外，並在點擊時從上向下滾動？目標是讓頁面1在加載時可見，而屏幕上沒有滾動條，然後一旦page2被放下，用戶就可以根據需要向後滾動。編輯：Here is a JSfiddle of a way I have gone about it using a different structure - 你在瀏覽器上看到這個問題嗎？你能改進嗎？

感謝您的幫助。

來源

2012-07-23 willdanceforfun

不要使用100％作爲margin-top，請考慮使用$（window）.height（）。如果您確定您的初始屏幕高度爲100％，將會爲您提供相同的結果並適用於所有瀏覽器。

$('#learnmore').click(function(){ 

    $('#page1').animate({'margin-top':$(window).height()},500); 
    $('#page2').animate({'margin-top':'0'},500); 
});

你還需要設置你的第1頁至100％的寬度和高度上也的document.ready（）

$('#page1').css("height", $(window).height() + "px");

做在learnmore.click＃2頁同樣的事情（）

來源

2012-07-23 12:36:56 Pabuc

跨瀏覽器友好，多頁全屏，滾動到佈局

回答

相關問題