Animated Scrolling - tetsuya

次のサンプルは、YAHOO.util.Scroll。
これも、YAHOO.util.Animの子孫。

overflowしている要素中の子要素（たとえば、divで囲まれた「文章」など）があったときに、イベントで、子要素の位置を指定した場所まで移動する。

これもサンプルがつまらないので、実験がてらに少し変えてみる。
Yahooのサンプルでは、縦スクロールしかしないので、横スクロールするようにして、座標として負の要素を入れてみた。

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<META http-equiv="Content-Style-Type" content="text/css">
<TITLE>Ajax_Sampling</TITLE>
<style type="text/css"> 
#demo {
    height:6em;
    width:20em;
    overflow:auto;
    margin-bottom:1em;
}
</style>

<!-- 読み込むjs --> 
<script type="text/javascript" src="scripts/yui/yahoo/yahoo-min.js" >
</script> 
<script type="text/javascript" src="scripts/yui/yahoo-dom-event/yahoo-dom-event.js" >
</script> 
<script type="text/javascript" src="scripts/yui/animation/animation-min.js" >
</script> 

<script type="text/javascript">

init = function() {
	//1. 下方向に（0,200px)目標にスクロールする。
	var attributes = {
            scroll: { to: [0, 200] }
        };
    var anim = new YAHOO.util.Scroll('demo', attributes);

    YAHOO.util.Event.on('demo-run', 'click', function() {
        anim.animate();
    });

    //2. 上方向に(0,-200px)目標にスクロールする。
	var attributes1 = {
            scroll: { to: [0, -200] }
        };
    var anim1 = new YAHOO.util.Scroll('demo', attributes1);

    YAHOO.util.Event.on('demo-run1', 'click', function() {
        anim1.animate();
    });
	
    //3. 右方向に(200px,0)目標にスクロールする。
	var attributes2 = {
            scroll: { to: [200, 0] }
        };
    var anim2 = new YAHOO.util.Scroll('demo', attributes2);

    YAHOO.util.Event.on('demo-run2', 'click', function() {
        anim2.animate();
    });

    //4. 右下方向に(200px,200px)目標にスクロールする。
	var attributes3 = {
            scroll: { to: [200, 200] }
        };
    // MotionはAnimの子孫なので、duration, easing methodも定義できる。
    var anim3 = new YAHOO.util.Scroll('demo', attributes3,
    	    1,YAHOO.util.Easing.easeIn);

    YAHOO.util.Event.on('demo-run3', 'click', function() {
        anim3.animate();
    });

}
</script>
</HEAD>

<BODY onload=init()>
<p>
<div id="demo" style={width:300;height:100;overflow:auto}>
	<!-- 枠のwidthを300px、中身を600pxにして、横スクロールさせる -->
	<div style={width:600}>
	おはようございます。Good Morning.
	おはようございます。Good Morning.
	おはようございます。Good Morning.
	おはようございます。Good Morning.
	おはようございます。Good Morning.
	おはようございます。Good Morning.
	おはようございます。Good Morning.
	おはようございます。Good Morning.
	おはようございます。Good Morning.
	おはようございます。Good Morning.
	おはようございます。Good Morning.
	おはようございます。Good Morning.
	おはようございます。Good Morning.
	おはようございます。Good Morning.
	おはようございます。Good Morning.
	おはようございます。Good Morning.
	おはようございます。Good Morning.
	おはようございます。Good Morning.
	おはようございます。Good Morning.
	おはようございます。Good Morning.
    </div>
</div>
</p>
<p>
<button id="demo-run">(200px,0px)</button>
&nbsp
<button id="demo-run1">(-200px,0pix)</button>
&nbsp
<button id="demo-run2">(0,200pix)</button>
&nbsp
<button id="demo-run3">(200pix,200pix)</button>
</p>

</BODY>
</HTML>

画面（実行前）は

となるが、負の数字を入れた際に動きがおかしくなる。
縦に200px動かして、Y座標として-200pxを指定すると、元の位置に戻ってしまう（相対的なtoになっている）。
横に200px動かして、(0,-200）にToを指定すると、横に-200px戻ってしまう。（これは変）

負の数字は入れない方がよさそうだ。