如何创建分页停止滚动动画

Question

iPhone

5s的新迷你网站有一个特殊的页面滚动：

http://www.apple.com/iphone-5s/

每次轻拂页面时，它都会滑行并停在下一个整页，而不是中途，也不会超过要求。他们是怎么做到的？

Answer 1

我不得不做一个类似的网站，我为它创建了一个插件：http://alvarotrigo.com/blog/fullpage-jquery-plugin-for-fullscreen-scrolling-websites/

• 生活演示

在我的中，您还可以：

• 在IE 8和不支持CSS 3的旧浏览器上使用它。
• 使用键盘箭头滑动抛出页面。
• 添加水平滑块。
调整
• 窗口大小时调整文本大小。
• 手机和平板电脑检测支持滚动。（因为可视化大内容和文本通常存在问题）

它是第一个版本，简单但运行良好:)

我会尽可能地改进它。欢迎提出建议。

Answer 2

OnePageScroll可能是你要找的：http://www.onextrapixel.com/2013/09/18/onepagescroll-js-creating-an-apples-iphone-5s-website/

Answer 3

我一直在摆弄类似问题的解决方案。

我的解决方案所做的只是监视窗口何时滚动。

if ($(window).scrollTop()+$(window).height()>=$("#page"+(nextpage)).offset().top+100) {

如果它滚动超过"页面"的末尾超过 50px，jquery 将动画滚动到下一个"页面"。

$('html, body').animate({ scrollTop: pageheight }, 500, function() { currentpage = nextpage; animatingdown = false; document.location.hash = currentpage;});

它对向上滚动执行相同的操作。这包括通过鼠标、键盘或 javascript 滚动。

查看完整代码 http://jsfiddle.net/dLCwC/1/

也许它对某人会有一些用处（让我知道它是，还是不是）。