Thickboxでメインウィンドウのスクロールを削除
2010年3月25日 | web | 
Be the First to Comment
Thickboxのインラインバージョン（Iframed content）で、
ボックスの中にスクロールが表示されたときの不具合（というか、気持ちよくない動作）の修正です。
マウスホイールでクルクルスクロールさせると、スクロールが一番下まできたとき
メインコンテンツの方もスクロールされてしまいます。
場合によりますが、スクロールさせたくないときは「thickbox.js」に以下の記述を追加します。（太字）
1か所目
if (typeof document.body.style.maxHeight === “undefined”) {//if IE 6
$(“body”,”html”).css({height: “100%”, width: “100%”});
$(“html”).css(“overflow”,”hidden”);
if (document.getElementById(“TB_HideSelect”) === null) {//iframe to hide select elements in ie6
$(“body”).append(“<iframe id=’TB_HideSelect’></iframe><div id=’TB_overlay’></div><div id=’TB_window’></div>”);
$(“#TB_overlay”).click(tb_remove);
}
}else{//all others
if(document.getElementById(“TB_overlay”) === null){
$(“body”).append(“<div id=’TB_overlay’></div><div id=’TB_window’></div>”);
$(“#TB_overlay”).click(tb_remove);
$(“html”).css(“overflow”,”hidden”);
}
}
2か所目
function tb_remove() {
tb_init_a = “”;
$(“#TB_imageOff”).unbind(“click”);
$(“#TB_closeWindowButton”).unbind(“click”);
$(“#TB_window”).fadeOut(“fast”,function(){$(‘#TB_window,#TB_overlay,#TB_HideSelect’).trigger(“unload”).unbind().remove();});
$(“#TB_load”).remove();
$(“html”).css(“overflow”,”auto”);
if (typeof document.body.style.maxHeight == “undefined”) {//if IE 6
$(“body”,”html”).css({height: “auto”, width: “auto”});
$(“html”).css(“overflow”,”");
}
document.onkeydown = “”;
document.onkeyup = “”;
return false;
}
ボックスが表示されて、TB_overlayというタグがあるときに、
html{overflow:hidden}
とし、ボックスが閉じたときには、
html{overflow:auto}
にするということですね。
Thickbox
http://jquery.com/demo/thickbox/
トラックバックURL:http://r77.jp/blog/2010/03/1105/trackback/
