Page1

横スクロールのデモ

このページは、Webロケッツマガジンの記事で使用しているデモです。
このデモは、コンテンツを横スクロールさせるサイトのデモです。

• 上のメニューや、マウスホイールすると該当ページにスクロールします。
• このやり方は、コンテンツは左揃えであることが前提です。
• <a href="#page2" class="pager">と書くことで、 任意のリンクにスクロールエフェクトがかかります。

Page2

スクロールバーについて

• このやり方では、横スクロールバーが出ます。横スクロールバーを直接操作されると、変なところでコンテンツを止めることができてしまいます。
• ブラウザの高さよりも高いコンテンツの場合は、一番高いコンテンツにあわせてスクロールバーが全ページに出ます。
  ※ このサンプルでは、マウスホイールを横スクロールに使っているので、マウスホイールで縦スクロールすることはできません。

↓長いコンテンツ






















ここまで

Page3

マウスホイールについて

• このサンプルのように、jquery.mousewheel.jsなどを使うことでマウスホイールにも対応できます。
  ただし、このサンプルのように、マウスホイールを横スクロールに割り当てると、縦スクロールできなくなります。

Page4

ハッシュ #page4 について

• スクロールバーを使っているので、ハッシュがそのまま使えます。ためしに、このページをリロードしてみてください。
• アニメーションはしませんが、ブラウザの戻るボタンにも対応しています。