看来，我想要实现的目标几乎是不可能的。
我正在尝试创建一个依赖于 jQuery 的水平布局，但即使关闭 Javascript 也可以使用。我还希望保留最干净的代码并保留其语义值。所以我想我正在寻找最终的解决方案。 :)
网络上最常见的水平布局是这样的:http://www.queness.com/resources/html/scroll/horizontal.html - 这将是完美的(即使 JS 关闭它也能工作)。我的问题是我需要让它“双向”工作(左和右，中间有“起始”项目)。
效果应该类似于:http://steveandjacqs.com/该网站(和编码后端)很棒，但没有 JS 就无法使用，而且代码充满了 hack。
我的CSS:
html,body { overflow: hidden; }
.wrapper { position: relative; width: 100%; height: 100%; }
.wrapper-cont { position: relative; width: 500%; height: 100%; margin-left: -200%; }
#item-left { position: absolute: top: 0px; left: 0%; }
#item-home { position: absolute; top: 0px; left: 200%; }
#item-right{ position: absolute; top: 0px; left: 400%; }
#item-down { position: absolute; top: 200%; left: 0%; }
我的 HTML:
<body>
<nav><ul>
<li><a href="#item-left">Left</a></li>
<li><a href="#item-home">Home</a></li>
<li><a href="#item-right">Right</a></li>
<li><a href="#item-down">Down</a></li>
</ul></nav>
<div class="wrapper">
<div class="wrapper-cont">
<div id="item-left">Element outside viewport on the left side</div>
<div id="item-home">Element on the center of viewport</div>
<div id="item-right">Element outside viewport on the right side</div>
<div id="item-down">Element on the center of viewport but down</div>
</div>
</div>
</body>
我的 JAVASCRIPT 将在各部分之间使用某种平滑的动画插件(也许是scrollTo？)。应禁用浏览器滚动(至少垂直)，DIV 本身应可滚动。
///
我应该发布我的网站的屏幕截图还是这样可以理解？
提前谢谢您!
PS:我或多或少是 jQuery copypasta，所以请对我宽容一点。 :)
更新
修改.htaccess以在进入主页时添加内部链接怎么样:将“http://example.com”重写为“http://example.com#home”？我可以“以通用方式”对布局进行编码(例如前面来自 Queness 的示例)。
最佳答案
您需要遵循示例网站的使用方式。
您当前设置中存在的问题是
- 菜单不在 home 元素内，因此它不会随之滚动..
- 每个“页面”的尺寸/位置错误
自动滚动到#item-home在开始时，您可以使用
<meta http-equiv="refresh" content="0;URL='#item-home'">
在 <head>您页面的部分
演示包括这些更正/添加，位于 http://jsfiddle.net/gaby/QsQDK/1/
关于jquery - 水平滚动布局左/右: jQuery/CSS quiz，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13683211/