html - 滑动整个网页

Question

有没有一种方法可以模仿您在 iPhone 上看到的“滑动整个页面”的 native 转换和功能，而不是在网络浏览器中？

我想要一个 HTML 页面滑过并在按下按钮后一个新的 HTML 页面取代它。

按钮不能是常量。因此，如果您要有一个常量标题，其中包含将内容滑动到框内的按钮，那将是不正确的。我需要滑动整个网页。

我需要用 HTML5 制作的幻灯片吗？提前感谢您的帮助!

编辑:我也一直在考虑可能并排设置两个全尺寸 DIV，其中一个用“overflow:hidden”隐藏在页面之外，然后使用 CSS 转换点击一个按钮，然后将一个 DIV 移出页面屏幕和另一个进入视野，但我不知道该怎么做。

关于此的另一个真正困难的部分是我的 DIV 容器需要是动态的并且 100% 宽度和高度。我不能使用固定尺寸。

编辑:

使用Ariel Flesler开发的scrollTo和localscroll函数我已经能够完成我正在寻找的 99%。然而，在开发的最后阶段，我遇到了一个巨大的障碍。这是一张图片，我希望它能帮助解释我正在尝试做的事情:

我的问题是主要内容区域是一个固定位置，带有 overflow-y auto，这样我就可以将 DIV 的滚动条保持在页眉和页脚之间。但问题是，当我通过点击按钮启动 DIV 的滑动动画时，固定内容区域不会移动，只有页眉和页脚移动。如果我将主要内容区域的定位更改为“相对”，所有内容都会按照我想要的方式移动，但我会失去滚动的定位。

如果有人能解决这个问题，我将非常感谢您!

(我会发布一个链接到我所拥有的，但我不能。这是公司的 secret 工作)

提前致谢!

编辑我正在审查所有这些信息。我会在几天内回复。谢谢大家的意见!

Answer 1

我目前正在开发一些可能对您有用的东西。它使用您考虑过的并排 div，但由于滚动条问题和浏览器差异，我发现很难使用 100% 宽度。我通过在提供跨浏览器解决方案(在 IE7、IE8、FF、Chrome、Safari、Opera 中测试)的 javascript (jQuery) 中设置宽度来克服这个问题。

通过检查源代码，您可以随意获取尽可能多的源代码，如果您需要我告诉您任何事情，请告诉我。

http://madesignuk.com/uploader/

PS 我不是 100% 确定有关将链接发布到我的个人网站的规则，因此如果这对版主来说是个问题，请告诉我。

PPS 该网站正在开发中所以请不要 mock 我 :p