PC/タブレット向けウェブページでは、2つか3つのカラムを持つレイアウトすっかり定着しています。しかし、全部まとめてスクロールしてしまうと、内容の短いカラムは空白になってしまい、せっかく読み進めてくれているユーザーへの情報伝達にロスが起こるのはもったいないですよね。

メインカラムに対して、各カラムのスクロール動作が効率的な例が、音楽共有サービス「SoundCloud」にあったので、ご紹介します。

まずは画面スクロールの動きを、わたしがこよなく愛する音楽レーベル「Gostly International」を例にご覧ください。
https://soundcloud.com/ghostly

PC/タブレット向けのSoundCloudページは3段カラムレイアウトで、役割は以下のようになっています。

中カラム：アカウントに属する音楽コンテンツが延々と続く（メイン）
左カラム：アカウント情報（メインと非連動）
右カラム：補足と関連情報（メインと連動し、カラム内の一番下までくるとスクロール停止）

スクロールパターン1：メインカラムのスクロールとは非連動で、カラム内に独立したスクロールバーを持たせる

SoundCloudの例では、左カラムに当たるものです。メインカラムのスクロールについていかないので、ページに固定されたように見えます。ファーストビューで全体が見える高さに収まるコンテンツに向いていますが、スクロールが必要な場合は気付かれにくいので、長い部分をCSSなどで隠すダイジェスト表示をしておいて、ユーザーが必要な項目を「続きを見る」ボタンなどでアクションを起こしてもらってから表示する方が良いでしょう。

実装は、カラムのボックスにposition:fixed;と、overflow:scroll;を設定します。

スクロールパターン2：メインカラムのスクロールに連動しつつ、コンテンツがなくなったらスクロール停止

SoundCloudの例では、右カラムに当たります。そこそこ長いカラムを、メインカラムを読み下げていくのに連動してスクロールし、カラム内の一番下までくると固定されます。

これと同様の動作をjQueryプラグインで実装する方法がこちらのサイトで紹介されていました。

他のカラムに合わせて内容をスマートにスクロールさせられるjQueryプラグイン「SmartColumnScroller」
http://phpspot.org/blog/archives/2010/12/jquerysmartcolu.html

コンテンツの内容に応じて、カラムのスクロール動作も設定することで、より快適さが生まれそうです。