facebook twitter youtube
Salesforce Java Android PHP JavaScript MySQL Perl node.js HTML iOS
in JavaScript - 07 2月, 2014
by mr58 - no comments
jInvertScrollの可変幅対応で陥りやすいトラップ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

を入れればOK。

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

ご注意を