蘋果式的網站逐節滾動行爲

我想弄清楚如何讓主要的可見內容區域擴大到瀏覽器的高度 - 它在某種意義上是響應式的。如果擴展瀏覽器，則會顯示更多內容。如果向下滾動，它會滾動到下一個div並重復該行爲。蘋果式的網站逐節滾動行爲

我不知道這種行爲被稱爲或稱爲，所以我不知道我可以給一個準確的標題。

我的猜測是，這是用Javascript完成的，但我對任何手段都不熟悉語言。有人能幫助我嗎？

例子： http://theartofraw.g-star.com & http://www.apple.com/iphone-5s/

2013-09-24 James Sterling

我用jQuery做到了這一點。基本上你會得到窗口的高度，然後將每張幻燈片的高度設置爲該值。

var origheight = $(".slide").height(); 
var height = $(window).height(); 

if (height > origheight) { 
    $(".slide").height(height); 
}

http://jsfiddle.net/uYXvF/

來源

2013-09-24 21:21:20 Pete

偉大的迴應，它的工作原理。那麼從一個部分到另一個部分的寬鬆程度如何，所以滾動並不那麼粗糙？ –

@JamesSterling那將是我在我的答案中寫的？ –

他們有專門的章節，是CSS 「的高度：100％」;

然後，他們檢測滾動和，做一個CSS3與CSS3過渡轉換：

變換：Y：0％
滾動檢測
變換：Y：100％

所以他們基本上阻止了實際的滾動，而是將整個內容移動了100％。

編輯（2）：在這篇文章中，他們展示瞭如何禁用滾動： How to disable scrolling temporarily?

function wheel(e) { 
    preventDefault(e); 
    document.getElementById("mainContainer").style.webkitTransition = "-webkit-transform 1s"; 
    document.getElementById("mainContainer").style.webkitTransform = "translateY(-100%)"; 
}

這是一個簡化版本，從我自己的網頁上使用。

來源

2013-09-24 21:31:02

如果您想要完成與您發佈的示例網站相同的內容，那麼您可以使用名爲fullPage.js的jQuery插件。

來源

2013-11-01 10:27:46 Alvaro

蘋果式的網站逐節滾動行爲

回答

相關問題