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

Question

Есть идеи, как обойти проблему с полосой прокрутки? Всякий раз, когда на моем сайте активируется 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'
      });  
    }); 

Answer 1

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

helpers:  {
    overlay: {
        locked: false
    }
}

Answer 2

Отредактируйте файл 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; <-- 
}

Answer 3

когда вы нажимаете, чтобы активировать полосу прокрутки, просто добавьте следующий код в код jQuery

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

, а когда закроете fancybox, добавьте следующий код

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

Answer 4

Вы используете 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

Answer 5

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

Answer 6

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

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

Answer 7

В версии: 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();
}

Answer 8

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

, т.е.это один из методов, есть и другие способы решить эту ошибку.