看来，这就是我想实现几乎是不可能的。水平滚动布局左/右：jQuery的/ CSS测验

我想创建一个水平布局依赖于jQuery的，但即使有可用的Javascript被关闭。我也希望保持最清晰的代码和语义值。所以我想我正在寻找最终的解决方案。 :)

在网络上最常见的横向布局是这样的：http://www.queness.com/resources/html/scroll/horizontal.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：

<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自己应该可以滚动。

///

我应该张贴我的网站的截图或者是understanble这样？

预先感谢您！

PS：我或多或少的jQuery copypasta，这样下去容易在我身上吧。 :)

UPDATE

有关修改的.htaccess添加在进入网页内部链接什么：重写 “http://example.com” 到 “HTTP：//example.com#home”？比我可以编写布局“常用的方式”（比如前面的例子来自Queness）。

来源

2012-12-03 Petr Cibulka

您的网页

演示包括这些修正/添加的<head>节你想在菜单中保持固定？或去家里的项目？ –

它应该与家庭项目。我可以诚实地改变它。 :) –

您将需要仿效网站使用的方式。

在你当前设置的问题是

菜单不是主元素里面，所以它不会与它滚动..
你必须为每个“页错尺寸/位置“

要自动滚动到#item-home上开始，你可以使用

<meta http-equiv="refresh" content="0;URL='#item-home'">

在http://jsfiddle.net/gaby/QsQDK/1/

来源

2012-12-03 13:37:43

非常感谢Gaby！现在我正在测试你在JsFiddle上看起来完美的溶剂。第一个问题：在添加'后，页面不断刷新。如何在第一次加载'＃item-home“时添加一个防止刷新？ –

嗯......在我的系统中，只有铬表现出这个问题..不知道有一个非JS客户端的解决方法。你可能需要做你在你的问题中提出的建议。即：重写url以添加'＃item-home'片段。 –

不幸的是，这还没有结束......我的小提琴：http://jsfiddle.net/cibulka/en9sw/7/它使用Ariel Flesler的插件ScrollTo进行平滑滚动。没有Javascript，上面的解决方案工作。用Javascript，它不。问题出现在应该滚动的容器中。如果我滚动整个文档，它的工作原理 - 但我不得不删除'overflow：hidden'。任何想法如何改善布局？谢谢，这只是变得无法忍受。 –

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

UPDATE

回答

相关问题