Как я могу избежать короткой смены страниц, используя fancybox 3

Question

Я использую fancybox (версия 3.5.7) для некоторых галерей изображений на веб-сайте joomla. Он прекрасно работает до тех пор, пока не будет смещено все тело страницы миниатюр при открытии страницы, при открытии модницы fancybox и при ее закрытии. Страница перемещается в течение очень короткого времени и впоследствии возвращается в исходное положение (см. Эффект на http://www.fischer -club.ch / index.php / unser-verein / retro-fotos / 1966-training-am- Sonntag ). Как я могу избежать этого сдвига?

Я использую fancybox в сочетании с другим скриптом jQuery, который называется masonry. Я попытался деактивировать сценарий кладки, но сдвиг все еще происходит. Я также пробовал разные решения от других постов до проблем shift с fancybox, но они в основном касаются версии 2 fancybox, так что ничего не помогло. Сдвиг происходит в разных браузерах, но не на смартфонах. Спасибо за любую помощь!

Answer 1

Сценарий по умолчанию скрывает полосы прокрутки страницы, применяя overflow: hidden; для элемента body. Поскольку это приводит к тому, что элемент body расширяется для заполнения свободного пространства, скрипт также вычисляет ширину вертикальной полосы прокрутки и использует это значение для установки правого поля для элемента body. Это работает очень хорошо (как вы можете видеть на домашней странице и во всех демонстрациях), но это можно нарушить, добавив некоторые дополнительные правила CSS, например, установив 100% ширину для элемента body.

Решением будет удаление (обычно ненужных) правил CSS, нарушающих рабочий процесс по умолчанию, или установка $.fancybox.defaults.hideScrollbar = false; для предотвращения скрытия полос прокрутки страницы.

Редактировать: в вашем случае смещение страницы вызвано этим правилом CSS:

body {
    transition: all 400ms ease;
}

Например, вы анимируете все, даже margin-right, добавленное в fancybox. Таким образом, либо удалите это правило CSS, либо измените all на width или все, что вы хотите анимировать.