苹果式的网站逐节滚动行为

我想弄清楚如何让主要的可见内容区域扩大到浏览器的高度 - 它在某种意义上是响应式的。如果扩展浏览器，则会显示更多内容。如果向下滚动，它会滚动到下一个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

苹果式的网站逐节滚动行为

回答

相关问题