Class: Fx.Scroll

オーバーフローをもったすべての要素をスクロールさせます。window要素も含みます。

注意点:

• Fx.Scrollを使うにはページを標準準拠モードで作成する必要があります。

継承:

• Fx

Fx.Scrollメソッド: constructor

構文:

var myFx = new Fx.Scroll(element[, options]);

引数:

1. element - (いろいろ) スクロールさせたい要素のidか、要素の参照。
2. options - (オブジェクト, オプション) すべてのFxオプションに加え、offset、overflown、wheelStopsを指定できます。

オプション:

1. offset - (オブジェクト: 初期値={'x': 0, 'y': 0}) 要素内でスクロールさせる距離を表すx、yプロパティを持ったオブジェクト。
2. overflown - (配列: 初期値=[]) 入れ子になったスクロールコンテナの配列。詳しくはElement:getPositionを参照のこと。
3. wheelStops - (真偽値: 初期値=true) falseなら、アニメーション発生以降にマウスホイールをしても止まりません。

戻り値:

• (オブジェクト) 新しいFx.Scrollインスタンス。

例:

var myFx = new Fx.Scroll('myElement', {

    offset: {
        'x': 0,
        'y': 100
    }
}).toTop();

注意点:

• Fx.Scrollアニメーションは、wheelStopsオプションをfalseに設定しない限り、マウスホイールによって停止されます。これはユーザーがWeb閲覧を自分で操作できるようにするためです。
• Fx.Scrollはスクロールバーのない要素には役立ちません。

Fx.Scrollメソッド: set

指定した要素を任意のx-y座標位置へ即座にスクロールさせます。

構文:

myFx.set(x, y);

引数:

1. x - (整数) 要素をスクロールさせたいx座標値。
2. y - (整数) 要素をスクロールさせたいy座標値。

戻り値:

• (オブジェクト) このFx.Scrollインスタンス。

例:

var myElement = $(document.body);
var myFx = new Fx.Scroll(myElement).set(0, 0.5 * document.body.offsetHeight);

Fx.Scrollメソッド: start

指定した要素を任意のx-y座標位置へスクロールさせます。

構文:

myFx.start(x, y);

引数:

1. x - (整数) 要素をスクロールさせたいx座標値。
2. y - (整数) 要素をスクロールさせたいy座標値。

戻り値:

• (オブジェクト) このFx.Scrollインスタンス。

例:

var myElement = $(document.body);

var myFx = new Fx.Scroll(myElement).start(0, 0.5 * document.body.offsetHeight);

注意点:

• 負の座標へスクロールさせることはできません。

Fx.Scrollメソッド: toTop

任意の要素を一番上までスクロールさせます。

構文:

myFx.toTop();

戻り値:

• (オブジェクト) このFx.Scrollインスタンス。

例:

//"myElement"を200px下にスクロールさせ、1.5秒待ってから
//一番上に戻します。
var myFx = new Fx.Scroll('myElement', {

    onComplete: function(){
        this.toTop.delay(1500, this);
    }

}).scrollTo(0, 200).chain(function(){

    this.scrollTo(200, 0);
});

Fx.Scrollメソッド: toBottom

指定した要素を一番したまでスクロールさせます。

構文:

myFx.toBottom();

戻り値:

• (オブジェクト) このFx.Scrollインスタンス。

例:

//windowを一番下までスクロールさせ、1秒待ってから一番上に戻します。
var myFx = new Fx.Scroll(window).toBottom().chain(function(){

    this.toTop.delay(1000, this);
});

Fx.Scrollメソッド: toLeft

指定した要素を一番左までスクロールさせます。

構文:

myFx.toLeft();

戻り値:

• (オブジェクト) このFx.Scrollインスタンス。

例:

//"myElement"を右に200pxスクロールさせてから、左に戻します。
var myFx = new Fx.Scroll('myElement').scrollTo(200, 0).chain(function(){

    this.toLeft();
});

Fx.Scrollメソッド: toRight

指定した要素を一番右までスクロールさせます。

構文:

myFx.toRight();

戻り値:

• (オブジェクト) This Fx.Scroll instance.

例:

//"myElement"を右端までスクロールさせ、それから一番下にスクロールします。
var myFx = new Fx.Scroll('myElement', {

    duration: 5000,
    wait: false
}).toRight();

myFx.toBottom.delay(2000, myFx);

Fx.Scrollメソッド: toElement

指定した要素を、渡された要素がある位置までスクロールさせます。

構文:

myFx.toElement(el);

引数:

1. el - (いろいろ) スクロールさせたい要素のIDか、要素への参照。

戻り値:

• (オブジェクト) このFx.Scrollインスタンス。

例:

//"myElement"をwindowの左上隅までスクロールさせます。
var myFx = new Fx.Scroll(window).toElement('myElement');

注意点:

• 位置指定の詳細についてはElement:getPositionを参照のこと。