水平滚动布局左/右：jQuery / CSS测验

看来，我想要实现的目标几乎是不可能的。

我试图创建一个依赖于jQuery的水平布局 ，但即使关闭Javascript也可以使用。 我还希望保留最清晰的代码并保持其语义值。 所以我想我正在寻找终极解决方案。 🙂

网络上最常见的水平布局是： http ： //www.queness.com/resources/html/scroll/horizo​​ntal.html – 这将是完美的（即使关闭JS也能正常工作）。 我的问题是我需要让它“双向”工作（左右两侧带有“开始”项目）。

效果应该类似于： http ： //steveandjacqs.com/网站（和编码后端）很棒，但没有JS它就无法使用，而且代码充满了黑客攻击。

我的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：

  
 
Left
 
Home
 
Right
 
Down
 
 
 
 
Element outside viewport on the left side
 
Element on the center of viewport
 
Element outside viewport on the right side
 
Element on the center of viewport but down
 
 
  

我的JAVASCRIPT会在各部分之间使用某种流畅的动画插件（可能是？）。 应该禁用浏览器滚动（至少是垂直），DIV本身应该是可滚动的。

///

我应该发布我的网站的截图还是这样的方式？

先感谢您！

PS：我或多或少是jQuery copypasta，所以请放轻松。 🙂

UPDATE

如何修改.htaccess以在进入主页时添加内部链接：将“http://example.com”重写为“http：//example.com#home”？ 比我可以编码布局“常用方式”（例如在前面的例子中来自Queness）。

Answer 1

您需要按照示例站点使用的方式进行操作。

您当前设置中存在的问题是

• 菜单不在home元素内，因此它不会随之滚动..
• 每个“ 页面 ”的尺寸/位置错误

要在开始时自动滚动到#item-home ，您可以使用

在您网页的部分

---

演示包括http://jsfiddle.net/gaby/QsQDK/1/上的这些更正/补充