Question

我正在试图弄清楚如何使主要的可见内容区域扩展到浏览器的高度 - 它在某种意义上是响应式的。如果您扩展浏览器，则会显示更多内容。如果向下滚动，它会滚动到下一个div并重复该行为。

我不知道这种行为被称为或称为什么，所以我不确定我能给出准确的标题。

我的猜测是这是用Javascript完成的，但我对这种语言并不熟悉。有人可以帮助我吗？

实施例： http://theartofraw.g-star.com＆amp; http://www.apple.com/iphone-5s/

Answer 1

我用Jquery完成了这个。基本上你得到窗口的高度，然后将每张幻灯片的高度设置为该值。

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

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

http://jsfiddle.net/uYXvF/

Answer 2

他们有部分，即CSS“高度：100％”;

然后他们检测滚动，并使用CSS3 Transition进行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%)";
}

这是我在自己的页面上使用的简化版本。

Answer 3

如果您希望完成与发布的示例网站相同的内容，那么您可以使用名为fullPage.js的jQuery插件。

类似Apple的网站逐段滚动行为

3 个答案: