PrettyPhoto.jsで表示した要素をスムーススクロール

JavaScript

PrettyPhoto.jsを使ってiframeやインラインコンテンツを読み出す際に、

  • Windows IE系ブラウザ
  • ページ全体にスクロールが発生している。
  • prettyPhoto内にスクロールがある。
  • マウスホイールなどでスクロールさせてる。

という環境下で、


マウスホイールでprettyPhoto内のスクロールを行っていて、
スクロールの始め・終りにあたった時に、
マウスホイールスクロールのフォーカスがページスクロールに移り、
ページがスクロールされて、prettyPhotoなんかガクガク。
（もしくは単にprettyPhoto表示時にスクロールしたらprettyPhotoガクガク）


という時がある。
その対策に、prettyPhoto表示時のページスクロールをsmoothにしてみる。

変更前(prettyPhoto.jsの370行目あたり)

$pp_pic_holder.css({
	'top': projectedTop,
	'left': (windowWidth/2) + $scrollPos['scrollLeft'] - ($pWidth/2)
});

$ppt.css({
	'top' : projectedTop - $tHeight,
	'left' : (windowWidth/2) + $scrollPos['scrollLeft'] - ($pWidth/2) + (settings.padding/2)
});

を、

変更後(prettyPhoto.jsの370行目あたり)

if($pp_pic_holder.tm)clearTimeout($pp_pic_holder.tm);
$pp_pic_holder.tm = setTimeout(function() {
	$pp_pic_holder.animate({
		'top': projectedTop,
		'left': (windowWidth/2) + $scrollPos['scrollLeft'] - ($pWidth/2)
		});
	},100)
				
if($ppt.tm)clearTimeout($ppt.tm);
$ppt.tm = setTimeout(function() {
	$ppt.animate({
		'top' : projectedTop - $tHeight,
		'left' : (windowWidth/2) + $scrollPos['scrollLeft'] - ($pWidth/2) + (settings.padding/2)
	});
}, 100)

としたらスムースな感じになった。

デモは以下。
http://2244.jp/_demo/jquery-prettyphoto/01/

prettyPhotoというのは以下。
jQuery lightbox for images, videos, YouTube, iframes - by Stephane Caron