背景スクロールの注意点

整数値がオーバーフローしたって元に戻るだけやん(FFFF + 1 = 0)と思って手抜きしていたら、Vistaでおかしな現象が起こりました。

DIV (id=idDIV) の background-image に画像を貼って、これを縦スクロールするとします。
スクリプトはこんな感じ


var y = 0;
function scroll() {
　　document.getElementById('idDiv').style.backgroundPosition = '0px ' + y + 'px';
　　y++;
}
setInterval( scroll, 100 );


これだと y がどんどん増えていくわけですが、冒頭に書いたように「別に構わんやん」と思ってました。
ところが Vista だとどっかのメモリ領域が破壊されるらしく、背景はなくなって黒くなるわ、タグ中のコンテンツの書き換え(innerHTML)がまともに動かないわ、と不思議な現象が起こることになってしまいました。

解決法は言うまでもなく、y の範囲に制限をかけてやれば良いです。
貼ってある画像の高さが 500px だとすると、


var y = 0;
function scroll() {
　　document.getElementById('idDiv').style.backgroundPosition = '0px ' + y + 'px';
　　y++;
　　if( y >= 500 )
　　　　y = 0;
}
setInterval( scroll, 100 );


とすれば解決ｖ