開発サイトにfancybox2を実装しました。
ファンシーボックスを使用すると(リンクをクリックするなど)、HTML全体が背後に移動し、トップに移動します。別のデモでうまく動作していますが、同じプロジェクトをこのプロジェクトにドラッグすると、一番上にジャンプします。インラインdivへのリンクだけでなく、シンプルな画像ギャラリーもあります。
誰もこれを経験しましたか?
これは、実際にはFancybox 2のヘルパーで実行できます。
$('.image').fancybox({
helpers: {
overlay: {
locked: false
}
}
});
http://davekiss.com/prevent-fancybox-from-jumping-to-the-top-of-the-page/
Jordanj77は正しいですが、最も簡単な解決策は、スタイルシートjquery.fancybox.css
に移動し、セクションoverflow: hidden !important;
で.fancybox-lock
と言う行をコメントアウトすることです。
これは古い質問だと思いますが、それに対する良い解決策を見つけたと思います。問題は、豪華なボックスがブラウザのスクロールバーを隠すためにボディのオーバーフロー値を変更することです。
Dave Kissが指摘しているように、次のパラメーターを追加することで、ファンシーボックスがこれを行うのを止めることができます。
$('.image').fancybox({
padding: 0,
helpers: {
overlay: {
locked: false
}
}
});
しかし、今では、空想ボックスウィンドウを見ながらメインページをスクロールできます。ページの先頭にジャンプするよりも良いですが、おそらく私たちが本当に望んでいるものではありません。
次のパラメーターを追加することにより、正しい方向へのスクロールを防ぐことができます。
$('.image').fancybox({
padding: 0,
helpers: {
overlay: {
locked: false
}
},
'beforeLoad': function(){
disable_scroll();
},
'afterClose': function(){
enable_scroll();
}
});
そして、galambalazからこれらの関数を追加します。参照: スクロールを一時的に無効にする方法?
var keys = [37, 38, 39, 40];
function preventDefault(e) {
e = e || window.event;
if (e.preventDefault) e.preventDefault();
e.returnValue = false;
}
function keydown(e) {
for (var i = keys.length; i--;) {
if (e.keyCode === keys[i]) {
preventDefault(e);
return;
}
}
}
function wheel(e) {
preventDefault(e);
}
function disable_scroll() {
if (window.addEventListener) {
window.addEventListener('DOMMouseScroll', wheel, false);
}
window.onmousewheel = document.onmousewheel = wheel;
document.onkeydown = keydown;
}
function enable_scroll() {
if (window.removeEventListener) {
window.removeEventListener('DOMMouseScroll', wheel, false);
}
window.onmousewheel = document.onmousewheel = document.onkeydown = null;
}
問題は、ブラウザのスクロールバーを隠すために、fancyBoxが本文のオーバーフロー値を変更することです。この動作を切り替えるオプションが見つかりませんでした。
FancyBoxコードのこのセクションを削除して、それを防ぐことができます。
if (obj.locked) {
this.el.addClass('fancybox-lock');
if (this.margin !== false) {
$('body').css('margin-right', getScalar( this.margin ) + obj.scrollbarWidth);
}
}
この問題を解決する適切な方法は、fancyboxが提供するオプション( この回答を参照 )によるものであるという事実にもかかわらず、CSSを使用して問題を解決できます。ライブラリのcssファイルを編集する必要はありません。これをアプリケーションのメインスタイルシートに追加するだけです。
html.fancybox-lock {
overflow: visible !important;
}
コードは、要素の元のオーバーフローをリセットします。問題は、overflow: hidden;
が<html>
要素のスクロールバーを非表示にして、ページを上部に「ジャンプ」させることです。スクロールバーの位置を保持するために、overflow: visible;
でオーバーフローを上書きします
これも助けました
.fancybox-lock body {
overflow: visible !important;
}
受け入れられた答えは、実際に問題を解決するわけではないため、完全に回避されません!ウィンドウジャンプの問題を修正しながら、実際に目的の機能を提供するより完全な答えを次に示します。
$('.fancybox').fancybox({
helpers: {
overlay: {
locked: false
}
},
beforeShow:function(){
$('html').css('overflowX', 'visible');
$('body').css('overflowY', 'hidden');
},
afterClose:function(){
$('html').css('overflowX', 'hidden');
$('body').css('overflowY', 'visible');
}
});
Fancyboxのデフォルト関数を使用している場合、実際には次のようにコーディングできます。
$(document).ready(function() {
$(".fancybox").fancybox({
padding: 0,
helpers: {
overlay: {
locked: false
}
}
});
});
たぶんこの答えはまだ遅いかもしれませんが、画像ファンシーボックスをクリックしてウェブサイトを一番上までスクロールした後、削除することができれば将来的に役立つかもしれません:
F.trigger('onReady');
またはより良い使用:
/*F.trigger('onReady');*/
FancyBoxバージョン:2.1.5(金、2013年6月14日)のコードの一部は897行目です。