看來，這就是我想實現幾乎是不可能的。水平滾動佈局左/右：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

回答

相關問題