jquery - overflow hidden 的水平网站滚动

Question

尝试创建一个横向网站。这个想法是让导航和页 footer 分保持静态，而主体可以向左/向右滚动..

Here is an example.

然而，这并不是我所需要的。这个滚动整个页面并且导航栏是固定的。

这是我想要实现的模型布局:

如果用户点击正文页面 2 的导航:

所以我开始在上面那个网站上通过 Chrome 中的 Inspect Element 进行测试，我尝试了以下 css:

body { max-width: 1000px; overflow: hidden; }
.panel { display: inline; }

我认为这可以解决问题，但它只是使整个页面垂直。然后我添加了一个 div id="top" 来封装 home newsletter directions contact 和 css:

body { max-width: 1000px; overflow: hidden; }
.panel { display: inline; }
#top { width: 10000px }

这也没有成功!

理想情况下，我希望页面根本无法滚动，并且仅在用户单击导航链接时动画/向左/向右滚动。

有什么想法吗？

谢谢。

Answer 1

只是给出一个开始的想法，您可以使用 css3 transform 属性来做到这一点。

将每个页面的内容保存在一个 div 中，将其转换为 100% 以便它在视口(viewport)之外，当您想要显示它时将其转换回 0%.

或者缩小到0，想显示的时候再缩小到1。

你必须使用 position z-index 等

也许是这样的FIDDLE