При активации fancybox 2 на родительской странице мигает полоса прокрутки, в результате чего содержимое смещается влево, а затем назад

Есть идеи, как обойти проблему полосы прокрутки? Всякий раз, когда fancybox активируется на моем сайте, он создает полосу прокрутки во время инициализации, а затем снова мигает - но это сдвигает всю страницу на долю секунды. Не очень элегантно!

Это ошибка с Fancybox 2?

Код, используемый для активации Fancybox: 

$('map > area.fancybox').click(function(e) {
      e.preventDefault();
      var url = $(this).attr('href');
       $.fancybox({
          'href' : url,
           closeBtn    : true,
           width    : '467',
           height    : '609',
           fitToView  : false,
           padding   : '5',
           openEffect  : 'none',
           closeEffect  : 'none'
      });  
    });
8 9
jquery fancybox

8 ответов:

При нажатии для активации полосы прокрутки просто добавьте следующий код в свой код jQuery

$("body").css("overflow","hidden"); // hide body scrollbar

И при закрытии fancybox добавьте следующий код

$("body").css("overflow","auto"); // show body scrollbar
5

Просто добавьте в опции следующий код: 

helpers:  {
    overlay: {
        locked: false
    }
}
22

Отредактируйте jquery.fancybox.css файл в следующих местах

.fancybox-lock {
    overflow: hidden;
}

Становится 

.fancybox-lock {
    overflow: hidden;
    margin-right:0 !important; <-- Add this
}

И 

.fancybox-lock .fancybox-overlay {
    overflow: auto;
    overflow-y: scroll;
}

Становится 

.fancybox-lock .fancybox-overlay {
    overflow: auto;
    overflow-y: auto; <-- 
}
12

Вы используете html { overflow-y: scroll; }? Это столкновение с Fancybox. Fancybox добавляет класс в ваш body, называемый .fancybox-lock, который сдвигает содержимое 17px вправо.

Скрипт удаляет полосы прокрутки из элемента "body" (применяя класс "fancybox-lock"), а затем компенсирует их, добавляя поля, чтобы избежать смещения содержимого.

Вы можете переопределить его следующим образом: 

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

Подробнее: https://github.com/fancyapps/fancyBox/issues/340

3

Убедитесь, что ваш Fancybox не инициализируется дважды. Я много лет страдал от боли, и когда я думал, что у Fancybox 2 были ошибки с AJAX windows, это была моя вина за то, что он инициализировался несколько раз.

1

В fancy box 2 больше всего времени показывает полоса прокрутки ,для избежания этого мы должны установить высоту и ширину тела, которые нужно загрузить в iframe,

Ie, 

<body style="height:300px;width:200px;overflow:hidden">
//body content come here
</body>

Это один метод, есть еще несколько других способов решить эту ошибку.

0

Просто попробуйте добавить маржу. Это помогло мне.

.fancybox-lock {
    overflow: hidden !important;
    width: auto;
    margin-right: 20px;
}
0

В версии: 2.1.1 я удаляю строку между строками 1743-1749. Плохой путь да, но работа. ^_^

Измените это:

if (obj.fixed && !isTouch) {
    if (obj.locked) {
        this.el.addClass('fancybox-lock');
        if (this.margin !== false) {
            $('body').css('margin-right', getScalar( this.margin ) + obj.scrollbarWidth);
        }
    }
} else {
    this.update();
}

Кому: 

if (obj.fixed && !isTouch) {

} else {
    this.update();
}
-1