隐藏溢出的水平网站滚动答案

【问题标题】：Horizontal website scrolling with overflows hidden隐藏溢出的水平网站滚动
【发布时间】：2014-05-10 20:04:15
【问题描述】：

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

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

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

如果用户点击正文页面 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 }

这也没有成功！

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

有什么想法吗？

谢谢。

【问题讨论】：

【解决方案1】：

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

将每个页面的内容保存在一个 div 中，将其翻译为 100%，以便在您想要显示时将其翻译回 0%。

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

你必须玩positionz-index等等

可能是这样的FIDDLE

【讨论】：

【解决方案2】：

这就是我得到的

这些属性使它起作用：

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

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

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

段落是相对定位的，并且有一个顶部偏移量，这样它们就不会接触到标题。

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

【讨论】：

【解决方案3】：

这是我对你正在寻找的东西的尝试。

要启用滚动，请移除

body { overflow: hidden; }

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

#content { left: -OFFSET; }

【讨论】：