jInvertScrollの可変幅対応で陥りやすいトラップ

縦スクロールアクションで横スクロールをしてくれるjQueryのライブラリjInvertScrollについて
言葉で説明するより実物を、と言う事であの有名な兄弟レーサーのページ

http://www.nintendo.com.au/gamesites/mariokartwii/

これについて、下記の条件を加えるカスタマイズをしました。

『各コンテンツ(１枚の表示)はウィンドウサイズに揃える』

これを実現するために、ダウンロードしたファイル群の中にあるサンプルをカスタマイズ。
ステップとしては
１．現在のWindowサイズを取得する
２．frontクラスの幅をWindowサイズの5倍に指定(ページが5枚あるため)
３．pageクラスの幅をWindowサイズに指定
４．各ページクラスを段階的にWindowサイズを加算してゆく
５．これらをリサイズ毎に実行する

簡単に言えば、全体幅と各ページの横幅を動的に変えてしまおうとしたわけです。
理由は上記の兄弟レーサーページでもそうですが、ミラクルフィットしていないため
横幅が広いと、次のページが見えてしまうため。

気にしなきゃ良いんですが、どうしても次のページが見えてしまうのを避けたいケースもあり。

上記のステップをソースにすると

$(document).ready(function()
{
	set_pagesize();
	window.onresize = function onResize(){set_pagesize()};  // ・・・５
	function set_pagesize()
	{
		// ページ幅(スクロールバー抜き)
		window_width = $('html').prop('clientWidth'); // ・・・１

		// frontクラスの横幅を指定
		var total_width = window_width * 5;
		$('.front').css('width', total_width+'px');   // ・・・２

		// 5ページ全ての横幅指定
		$('.page').css('width', window_width);        // ・・・３
		//$('.scroll').css('width', window_width);    // ・・・３(こっちが正解かもだが)

		// 2ページ目
		var width = window_width;
		$('.description').css('left', width+'px');    // ・・・４

		// 3ページ目
		width += window_width;
		$('.documentation').css('left', width+'px');  // ・・・４

		// 4ページ目
		width += window_width;
		$('.options').css('left', width+'px');        // ・・・４

		// 5ページ目
		width += window_width;
		$('.download').css( 'left', width+'px');      // ・・・４
	}
});

これでOK
※その他のHTMLやCSSはサンプルを参考にしてください。

で、ここで要注意なのは、jInvertScrollの発火タイミング。
jQuery系には良くある話ですが、可変値に応じて再発火しないとダメです。
具体的には、上記サンプルの32行目の後に

		var scroll_speed = window_width * 3;
        $.jInvertScroll(['.scroll'],
						{
							height: scroll_speed,
							onScroll: function(percent)
							{
								console.log(percent);
							}
						});

を入れればOK。

これをしないとスタイルシートで指定した値を読み取り
それがウィンドウサイズより大きければマイナス、小さければプラスにずれて行くため
意図した動きにはならないです。

ご注意を