もさもさJavaScriptを書いている今日このごろです。

1999.3 
S浦工業大学を卒業。

1999.4〜2003.6 
設計事務所に勤務。木造住宅の設計をしていました。自分のパソコンはこのころ初めて購入（Windows）。Illustrator7やFlash4も初めて触ったよ。

2003.6 
設計事務所を退所し、バイトしながらデ○○リに半年通う。デリ○○じゃないよ！

2003.12 
デ○○リを卒業。このころ、初めてのmac、PowerBookG4（チタニウム）を購入。

2003.12〜2005.10 
一般企業でWebサイトの更新などのバイト。ああ、会社ってこんな所なんだぁ。

2005.4 
バイトを辞めて、とある小規模のWeb制作会社に就職が内定したが、先方の経営上の都合により取り消し（久しぶりに思い出した）。もとさやに収まる。このころからバイトじゃなくて業務委託にしてもらう。

2005.10 
やはり制作会社に就職しようと思い業務委託も終了する。実はフリーランスになろうなどとは夢にも思っていなかったのだが・・

2006〜2007 
なぜだかフリーランスとしてWebサイトのデザイン、コーディング、Flash、DTPデザインなど。

2008 
今年はJavaScriptが暑いぜ（謎

略歴でも書いてみるか

<a href="http://www.110chang.com/blog/2008/02/divjavascript.html">div要素などをスクロールに追随させるJavaScript</a>の続きです。

クラス化と、間違いや、効率的でないところの修正もしています。



<a href="http://www.110chang.com/lab/scrollchaser2/">サンプル</a>（スクリプト以外は前回と同じ）

# とりあえず隠蔽する

これでグローバル変数は２つになる。
でも、この場合、`ScrollChaser`のプロパティにはアクセスできない。

```js
function ScrollChaser(id,int)
{
 var el;
 var initTop;
 var interval = int;
 //
 function setting()
 {
 el = document.getElementById(id);
 el.style.position = 'absolute';
 initTop = el.offsetTop;
 //
 try {
 window.addEventListener('scroll', scrollEvent, false);
 } catch (e) {
 window.attachEvent('onscroll',scrollEvent);
 }
 }
 function scrollEvent()
 {
 var myInt = setInterval(function()
 {
 var cur = (document.body.scrollTop||document.documentElement.scrollTop)+20;
 var myTop = el.offsetTop;
 var d = cur-myTop;
 if(Math.abs(d) > 1) {
 if( cur < = initTop )
 {
 var y = myTop + d/3;
 el.style.top = y+"px";
 } else {
 el.style.top = initTop+"px";
 clearInterval(myInt);
 }
 } else {
 el.style.top = cur+"px";
 clearInterval(myInt);
 }
 },interval);
 }
 try {
 window.addEventListener('load', setting, false);
 } catch (e) {
 window.attachEvent('onload', setting);
 }
}
//
var sc = new ScrollChaser('side',200);
```

# prototypeプロパティを使用する

`prototype`プロパティは`new`演算子でオブジェクトが生成されたときに設定されます。
`prototype`プロパティに追加されたプロパティはそのオブジェクトの全てのインスタンスで使うことができます。これによりクラス的なオブジェクトの使い方ができるようになります。

`prototype`プロパティにより`ScrollChaser`内のプロパティにアクセスできるようになりました。ただ、注意しないといけないのは、`window.onload`や`setInterval()`からプロパティを呼び出すときにスコープを指定しないと呼び先の`this`がオブジェクト本体を参照しなくなる（`window`だとグローバルオブジェクトを参照することになるのかな？）ところ。ローカル変数に`this`を格納してローカル変数を参照しなければなりません。

インスタンスプロパティ（`this.hogehoge`）にいちいちthisキーワードを指定しないといけないのは面倒いな。上記のようなActionScript的な書き方ができればいいのに。

```js
function ScrollChaser(id,int)
{
 this.interval = int;
 this.id = id;
}
//
ScrollChaser.prototype.init = function()
{
 var scope = this;
 //
 try {
 window.addEventListener('load', scope.setting, false);
 } catch (e) {
 window.attachEvent('onload', scope.setting);
 }
}
ScrollChaser.prototype.setting = function()
{
 var scope = this;
 //
 this.el = document.getElementById(this.id);
 this.el.style.position = 'absolute';
 this.initTop = this.el.offsetTop;
 //
 try {
 window.addEventListener('scroll', scope.scrollEvent, false);
 } catch (e) {
 window.attachEvent('onscroll', scope.scrollEvent);
 }
}
ScrollChaser.prototype.scrollEvent = function()
{
 var el = this.el;
 var init = this.initTop;
 //
 var myInt = setInterval(function()
 {
 var cur = (document.body.scrollTop||document.documentElement.scrollTop)+20;
 var myTop = el.offsetTop;
 var d = cur-myTop;
 if(Math.abs(d)>1) {
 if( cur >= init )
 {
 var y = myTop + d/3;
 el.style.top = y+"px";
 } else {
 el.style.top = init+"px";
 clearInterval(myInt);
 }
 } else {
 el.style.top = cur+"px";
 clearInterval(myInt);
 }
 },this.interval);
}
//
var sc = new ScrollChaser('side',200);
sc.init();
```

div要素などをスクロールに追随させるJavaScript【その２】

よくメニューがスクロールと一緒にくっついてくる、あれです。



<a href="http://www.110chang.com/lab/scrollchaser/">サンプル</a>

# Element.offsetTopというプロパティ

この機能を作るにあたっては移動する要素の`body`上の位置を取得することが必要です。`offsetTop`（並びに`offsetLeft`、`offsetHeight`、`offsetWidth`、`offsetParent`）はIE5の時に独自に拡張されたプロパティで、他のブラウザも追随して実装したようです。渡りに船のようなプロパティですが、これがブラウザごとにまるで解釈が違うと言うとんでもない厄介者でした。

<a href="http://d.hatena.ne.jp/susie-t/20061004/1159942798">offsetTop/offsetLeft/offsetParentの闇</a>でかなり掘り下げて検証されているのですが（引用しといて失礼な話ですが、正直な所、じっくり読む気にはなりません・・）、例えば、IE6では指定要素の親要素から何pxオフセット（？）しているかを返しますが、Firefoxでは`body`要素からの値を返します。

実は、これは<a href="http://mootools.net/">mootools</a>などのJavaScriptライブラリを使うとそのための関数とかあったりします。が、今回は勉強のために自力でやってみますた！！！

<del datetime="2008-02-12T00:00:00+09:00">コード中のgetTop()という関数がそれです。関数が呼び出されるとbodyに到達するまでtopにoffsetTopを加え続けます。しかし、どうもbodyのmargin指定があるときうまく取得できないんですよねー。ここはbody{ margin: 0 }が前提と言うことで・・</del><ins datetime="2008-02-12T00:00:00+09:00">IEだとエラーが出て動かない。先にposition="absolute"を指定すればoffsetParentがHTML要素になるのでその方法で回避することにした。→<a href="http://www.110chang.com/blog/2008/02/divjavascript_1.html">div要素などをスクロールに追随させるjavascript【その２】</a></ins>

# IE6はDTDがxhtmlだとbody.onscrollが動かない

`attachEvent`で回避。

# IE6だとホイールでスクロールしたとき動きが変

FirefoxやSafariだとスクロールバーをドラッグしても、ホイールでスクロールしても、要素がスムースに動くんですが（`scrollTop`をターゲットに収束させている）、IE6がこれを無視しやがるので`onmousewheel`イベントを使って直した気になってた。

今見ると`onscroll`でも`onmousewheel`でもスムースに動く時とぎこちない時があるようなので`onscroll`のみにした。

# 内容とは直接関係ないけど、JavaScriptでクラスっぽいの作るのって難しいな

ActionScriptでクラス化する書き方はだいぶ分かってきたんだけど、JavaScriptは明示的なクラスがないのでどうもよくわからん。ホントは

```js
var sc = new ScrollChaser('side')
```

とか、引数を渡すだけでいいようにしたいんだけどな。隠蔽できるようにがんばる。

```js
//
// scrollchaser.js
//
// 2008.2.4
//
var el;
var initTop;
var interval = 200;
//
function setting()
{
	el = document.getElementById('side');
	initTop = el.offsetTop||getTop( { el:el } );
	el.style.position = 'absolute';
	try {
		window.addEventListener('scroll', scrollEvent, false);
	} catch (e) {
		window.attachEvent('onscroll',scrollEvent);
	}
}
function scrollEvent()
{
	var myInt = setInterval(function()
		{
			var cur = (document.body.scrollTop||document.documentElement.scrollTop)+20;
			var myTop = el.offsetTop||getTop( { el:el } );
			var d = cur-myTop;
			if(Math.abs(d)>1) {
				if( cur >= initTop )
				{
					var y = myTop + d/3;
					el.style.top = setPx(y);
				} else {
					el.style.top = setPx(initTop);
					clearInterval(myInt);
				}
			} else {
				el.style.top = setPx(cur);
				clearInterval(myInt);
			}
		},interval);
}
function getTop( args )
{
	var el = args.el;
	var tagName = el.tagName;
	var top = args.top||0;
	if(tagName=='body'||tagName=='BODY')
	{
		return top;
	} else {
		return arguments.callee( { el:el.offsetParent, top:top += el.offsetTop } );
	}
}
function setPx( num )
{
	return num+'px';
}
try {
 window.addEventListener('load', setting, false);
} catch (e) {
 window.attachEvent('onload', setting);
}
```

Archive for 2008.02

略歴でも書いてみるか

div要素などをスクロールに追随させるJavaScript【その２】

div要素などをスクロールに追随させるJavaScript