JQuery - Fancybox - проблема с изменением фоновой страницы

Ответ 1

Недавно у меня была очень похожая ситуация с Fancybox v2. Моя начальная страница содержала содержимое ниже складки и, следовательно, имела полосу прокрутки (возможно, OP тоже, это не понятно). Увольнение линии Fancybox вызвало тот же сдвиг в теле страницы и очистку полосы прокрутки; закрытие изображения Fancybox сдвинуло тело назад и снова включило полосу прокрутки.

Корректировки .fancybox-lock не работали для меня, но при создании экземпляра объекта Fancybox был включен следующий параметр:

helpers: { 
    overlay: { 
        locked: false 
    } 
}

Единственное предостережение - это не блокирует ваш Fancybox до центра страницы, если вы прокручиваете, то есть страница с видом Fancybox полностью прокручивается. Для меня это было меньше двух зол.

Ответ 2

У меня была такая же проблема в последнее время. Найдите .fancybox-lock в CSS fancybox и измените его на:

.fancybox-lock {
    overflow: hidden;
    margin: 0 !important;
    }

Voila!: D

Ответ 3

Вы можете отключить функцию блокировки:

$(".fancybox").fancybox({
    helpers : {
        overlay : {
            locked : false
        }
    }
});

Работал для меня.

Ответ 4

Это известная проблема, здесь вы можете узнать больше: проблемы, fancyapps @GitHub

Я использую fancybox2 (версия 2.1.5). Я решил проблему, слегка изменив файл jquery.fancybox.css:

Найдите раздел "Оверлейный помощник" (начинается с строки 165) и измените два правила:

.fancybox-lock {
/*  overflow: hidden !important;*/
    overflow-x: hidden !important;
    overflow-y: scroll !important;
    width: auto;
}

и второе правило:

.fancybox-lock .fancybox-overlay {
/*  overflow: auto;
    overflow-y: scroll;*/
    overflow: hidden !important;
}

Это работает достаточно хорошо (imho), хотя страница прокручивается за наложением.

По крайней мере, подавляющий "смещающий правый" эффект подавляется.

Позже я обнаружил, что элементы, которые были расположены с "right: 0;" были сдвинуты влево на ширину вертикальной полосы прокрутки.

Это из-за права margin устанавливается fancybox.js-кодом, добавляя стиль node внутри элемента head.

Чтобы исправить проблему, просто измените одну строку кода внутри файла jquery.fancybox.js или файл jquery.fancybox-2.1.5-pack.js, в зависимости от того, какой из них вы используете.

в строке 2017 распакованной версии:

$("<style type='text/css'>.fancybox-margin{margin-right:" + (w2 - w1) + "px;}</style>").appendTo("head");

// change it to

$("<style type='text/css'>.fancybox-margin{margin-right: 0;}</style>").appendTo("head");

// perhaps comment out the complete line, I haven't testet it though

или в .pack файле (строка 46 возле EOL):

/* [much more code before] */ f("<style type='text/css'>.fancybox-margin{margin-right:"+(d-a)+"px;}</style>").appendTo("head")})})(window,document,jQuery);

// change it to:

/* [much more code before] */ f("<style type='text/css'>.fancybox-margin{margin-right:0;}</style>").appendTo("head")})})(window,document,jQuery);

// or try to remove the "f().appendTo()"-part completely (untested)

Ответ 5

Я просто решил это, добавив в свой элемент body "margin-right: auto! important":) Это по правилам Fancyboxes имеет собственный margin-right: 0.

Ответ 6

В версии 2.1.3 прокомментируйте строки 1802-1807 (ниже) в jquery.fancybox.js.

if (!this.overlay) {

this.margin = D.height() > W.height() || $('body').css('overflow-y') === 'scroll' ? $('body').css('margin-right') : false;

this.el     = document.all && !document.querySelector ? $('html') : $('body');

this.create(opts);

}

Ответ 7

Я использовал fancybox v.2.1.4 с изображением фиксированного, центрированного фона для тела и всегда отображал вертикальную полосу прокрутки.

body{
  background: url('../img/sfondo.jpg') fixed center top;
  overflow-y: scroll;
}

Несмотря на то, что я заставил отображать полосу прокрутки, у меня была проблема сдвига фонового изображения с firefox на mac (хром и сафари были в порядке, так как полосы прокрутки львов не занимают места внутри страницы) и т., ff, chrome на окнах.

Итак, я заметил, что если я вручную установил x-offset вместо мира center в свойстве фона проблема исчезла, поэтому я справился с ним с небольшим количеством jquery в HEAD страницы:

<script>
    function centerTheBackground(){
        var pageWidth = $(window).width();
        var imageWidth = 1920; //set here the width of the background image
        var xOffset = (imageWidth/2) - (pageWidth/2);
        jQuery('body').css('background-position', '-' + xOffset + "px top");
    }


    jQuery(function($){
        centerTheBackground();
    });


    $(window).resize(function() {
        centerTheBackground(); //re-center the background image during window resizing
    });             
</script>

Ответ 8

Ну, я просто прокомментировал следующую строку в fancybox CSS

/*.fancybox-lock {
    overflow: hidden;
}
*/

И он начал нормально работать:

• fancyBox - плагин jQuery
• версия: 2.1.4 (чт, 10 янв 2013)

Ответ 9

Это сделало это для меня...

.fancybox-lock {
        overflow: hidden !important;
        padding-right: 17px;
}

.fancybox-lock body {
    overflow: hidden !important;
}

Ответ 10

Вы столкнулись с этой проблемой для полосы прокрутки! просто проследите ширину полосы прокрутки и используйте эту ширину как ".fancybox-lock" margin-right ". например,

.fancybox-lock{
       margin-right: [your calculated width] !important;
 }

Это решит вашу проблему наверняка, потому что у меня также была эта проблема.

Ответ 11

Если ваша проблема связана с исправлением элементов, когда Fancybox открывается, просто добавьте padding-right: 17px к тем элементам вашего CSS, которые содержатся в классе .fancybox-lock.

Ответ 12

Я использую fancy box 3 и имел ту же самую проблему, потому что моя основная обертка была абсолютной положением.

убедитесь, что у вас нет обертки, и она должна работать нормально.