PrettyPhoto.jsを使ってiframeやインラインコンテンツを読み出す際に、
という環境下で、
マウスホイールで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