水平网站滚动与溢出隐藏

Question

尝试创建一个横向网站。这个想法是导航和页脚部分是静态的，而身体可以向左/向右滚动..

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

这是我对你正在寻找的东西的刺痛。

http://jsfiddle.net/R7w5e/

要启用滚动功能，请移除

body { overflow: hidden; }

要手动设置滚动位置，请更改

#content { left: -OFFSET; }

Answer 2

只需提出一个想法，您可以使用css3 transform属性执行此操作。

将每个网页内容保留在div中，将其翻译为100%以便它能够移出视口，当您想要显示它时，请将其翻译回0%。

或者将其缩放为0，当您想要显示它时，将其缩小为1。

您必须使用position z-index等

也许像这样FIDDLE

Answer 3

这是我得到的

http://jsfiddle.net/Shwunky/jkaMC/

这些属性使其有效：

html, body {
    width: 300%;
    height: 100%;
    overflow-x: hidden;}
.panel {
    width: 33%;
    height: 100%
    float: left;}

如果删除溢出，可以看到它们水平对齐。我不明白的是，即使面板宽度为33％，每个面板的宽度= / = 300％的33％（~100％），使每个面板的宽度>视口的100％浏览器的宽度。

页眉和页脚都有固定的位置，因此它们将始终在屏幕上。

段落是相对定位的并且具有顶部偏移量，以便它们不会触及标题。

我不知道动画，但我认为这基本上就是你所需要的。