1

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

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

我的猜测是这是用 Javascript 完成的，但无论如何我都不精通该语言。有人可以帮我吗？

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

4

3 回答 3

1

它们有部分，即 CSS“高度：100%”；

然后他们检测滚动，并使用 CSS3 转换进行 CSS3 转换：

  1. 变换：Y：0%
  2. 检测到滚动
  3. 变换：Y：100%

所以他们基本上是在阻止实际滚动，而是将整个内容移动 100%。

编辑（2）：在这篇文章中，他们展示了如何禁用滚动： 如何暂时禁用滚动？

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

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

于 2013-09-24T21:31:02.590 回答
1

我已经用 Jquery 做到了这一点。基本上你得到窗口的高度，然后将每张幻灯片的高度设置为该值。

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

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

http://jsfiddle.net/uYXvF/

于 2013-09-24T21:21:20.677 回答
1

如果您想完成与您发布的示例网站相同的操作，那么您可以使用一个名为fullPage.js的 jQuery 插件。

于 2013-11-01T10:27:46.137 回答