この記事は、@astronaughtsさん主催のTitanium mobile “early” Advent Calendar 2012に参加して書いております。16日目（11/16）担当でございます。

みんなが好きなイベントは？そうscrollイベントですね！

Titanium mobileのscrollイベントが思い通り動いてないっぽかったので、動きを調べてみました。(SDK2.1.4 GA、iOSシミュレータで検証)

scrollイベント

scrollViewをスワイプしてスライドさせたときに発火するのがscrollイベントです。

scrollしている間、scrollイベントが発火し続け、scrollが慣性で止まると、scrollEndが発火します。

以下のようなイメージ

xはscroll時の座標です。

疑問(1) scrollEndが発火しない？

scroll中にtapして強制的にscrollを止めた直後、scrollEndが発火しません。
が、tapを終えると（tapしたマウスのクリックを離すと）scrollEndが発火します。

疑問(2) scrollToしたら？

scrollToを使って、プログラムで移動させた場合、どうなるか？

結論：scrollのみ連続で発生

scrollToを使っても一瞬で移動する訳ではないので、移動の間scrollが発火し続けます。ただし、scrollEndは発火しません

こんな感じ。
scrollが終わってもscrollEndは発火してません。

疑問(3) viewの横幅変えると？

scrollのwidthや、scrollに乗っかるviewのwidthを変えるとscrollイベントは発火するのか？という疑問です。
正直最初発火しているように思ったのですが、ちゃんと検証したら発火していませんでした。これが実は個人的に一番やってよかった検証。。。

おわり

単発でイベントが発生するパターンが多い中、連続で発火するscrollは少しクセがあるように感じました。うまく使いこなせるようになりたいものです。
以下に検証用ソースコード貼っておきます。

function FirstView() {
        var self = Ti.UI.createView();  

        var scrollView = Titanium.UI.createScrollView({
                height:300,
                width : 300,
                contentHeight : 300,
                contentWidth : 'auto',
                top : 50,
                backgroundColor:"#black",
        });
        var scrollOnView = Ti.UI.createView({
                top : 50,
                left: 0,
                height : 200,
                width : 1000,
                backgroundColor:"#blue",
        });
        scrollView.add(scrollOnView);
        
        var text = "abcdefghigklmnopqrstuvwxyz";
        text += "abcdefghigklmnopqrstuvwxyz";
        text += "abcdefghigklmnopqrstuvwxyz";
        text += "abcdefghigklmnopqrstuvwxyz";

        var label = Ti.UI.createLabel({
                text : text,
        })
        scrollOnView.add(label);        
        
        self.add(scrollView);

        
        scrollView.addEventListener("scroll",function(e){
                Ti.API.info("scroll x=" + e.x);
        });
        scrollView.addEventListener("scrollEnd",function(e){
                Ti.API.info("scrollEnd");
        });

        
        var addWidthButton = Ti.UI.createButton({
                title:"add width",
                top : 360,
                left : 10,
        });
        self.add(addWidthButton);
        
        addWidthButton.addEventListener('click',function(){
                scrollOnView.setWidth(scrollOnView.getWidth() + 10);
                scrollView.setWidth(scrollView.getWidth() + 10);
        });


        var scrollButton = Ti.UI.createButton({
                title:"scroll",
                top : 360,
                left : 120,
        });
        self.add(scrollButton);
        
        var x=0;
        scrollButton.addEventListener('click',function(){
                if(x==0){
                        x=600;
                }else{
                        x=0;
                }
                scrollView.scrollTo(x,0);
        });

        return self;
}

module.exports = FirstView;