类似苹果的网站逐节滚动行为

Apple-like website section-by-section scrolling behavior

本文关键字：滚动 网站 苹果      更新时间：2023-09-26

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

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

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

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

我已经用Jquery完成了这个。基本上，您可以获取窗口的高度，然后将每张幻灯片的高度设置为该值。

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

http://jsfiddle.net/uYXvF/

他们有部分，即 CSS "height： 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%)";
}

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

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

相关文章：