Yahoo! User Interface Library (YUI)を使ってなめらか横スクロールのためのメモ 2008/01/27 2008/01/27

どうしてもなめらか横スクロールを実現したくて、いろいろさまよって結果、YUIを使うほうが簡単かもというの現在の結論です。

僕が調べた範囲ではjQueryを使ったサンプルの多くが、aタグだったので、よく理解できず、間口を拡げて検索かけたら、YUIを使ったサンプル説明ページがあったので、ためしたらすんなりできたので、とりあえず、YUIで。

• YUIスクロール - ［JavaScript］All About
• The Yahoo! User Interface Library (YUI)

必要なスクリプトファイルの数が正確に把握できていないのですが、
animation-min.js,dom-min.js,event-min.js,yahoo-min.js
って感じです。

横の場合のパラメータは、[横,0]です。
overflowがhiddenなdiv id=scrollerにsectionをならべて、その幅分を移動させるって感じでしょうか。

YAHOO.namespace('aaa');

YAHOO.aaa.doScroll = function(pos) {

var anim = new YAHOO.util.Scroll(
'scroller',
{scroll:{to:pos}},
0.5,
YAHOO.util.Easing.easeOut
);

//
anim.animate();
}

YAHOO.aaa.doScroll をアクションにしかけます。
呼び出しはYAHOO.aaa.doScroll ([横,0])って感じです。

<a href="#books"
onclick="YAHOO.aaa.doScroll([700, 0]);return false;" title="book"
>Books</a>

YUI、いろいろできそうですね。