0

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

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

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

4

3 回答 3

2

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

在我的，你还可以：

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

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

我会尽我所能继续改进它。建议将非常受欢迎。

于 2013-09-27T11:38:32.813 回答
1

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

于 2013-09-23T00:15:55.780 回答
0

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

我的解决方案就是在窗口滚动时进行监控。

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

如果它滚动超过“页面”的末尾超过 50 像素，jquery 会将滚动动画到下一个“页面”。

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

向上滚动也是如此。这包括通过鼠标、键盘或 javascript 滚动。

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

也许它对某人有用（让我知道它是否有用）。

于 2013-12-10T01:35:32.173 回答