3

私が達成しようとしていることはほとんど不可能のようです。

jQueryに依存する水平レイアウトを作成しようとしていますが、Javascriptをオフにしても使用できます。また、セマンティック値を維持したまま、可能な限りクリーンなコードが必要です。だから私は究極の解決策を探していると思います。:)

Webで最も一般的な水平レイアウトは次のとおりです。http ://www.queness.com/resources/html/scroll/horizo​​ntal.html-これは完璧です(JSがオフの場合でも機能します)。私の問題は、それを「双方向」で機能させる必要があることです(左右の「開始」項目を中央に配置)。

効果は次のようになります。http://steveandjacqs.com/ Webサイト(およびコーディングバックエンド)は素晴らしいですが、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自体はスクロール可能である必要があります。

///

私のウェブサイトのスクリーンショットを投稿する必要がありますか、それともこのように理解できますか?

前もって感謝します!

PS:私は多かれ少なかれjQueryのコピーパスタなので、気楽にやってください。:)

アップデート

ホームページに入るときに内部リンクを追加するために.htaccessを変更するのはどうですか?「http://example.com」を「http://example.com#home」に書き直しますか?レイアウトを「一般的な方法」でコーディングできるよりも(前のQuenessの例など)。

4

1 に答える 1

1

サンプル サイトの使用方法に従う必要があります。

現在のセットアップの問題は

  • メニューはホーム要素内にないため、一緒にスクロールしません..
  • 各「ページ」のサイズ/位置が間違っています

開始時に自動スクロールするには#item-home、次を使用できます

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

<head>あなたのページのセクションで


これらの修正/追加を含むデモhttp://jsfiddle.net/gaby/QsQDK/1/

于 2012-12-03T13:37:43.193 に答える