fancybox2 / fancybox заставляет страницу перескакивать наверх

105

Я реализовал fancybox2 на сайте разработчиков.

Когда я включаю fancybox (щелкаю ссылку и т. Д.), Весь html смещается за ним - и идет вверх. У меня он отлично работает в другой демонстрации, но когда я перетаскиваю тот же код в этот проект, он перескакивает наверх. Не только со ссылками на встроенные div, но и с простой галереей изображений.

Кто-нибудь испытал это?

jquery css fancybox-2 шерифдерек
источник
примечание: я только что проверил это на ipad и iphone, и эта проблема не возникает ... однако она находится в chrome и firefox.
sheriffderek
1
Если вы используете fancybox v2.1.5, похоже, что проблема была исправлена ​​в последней версии мастера, которую вы можете скачать здесь github.com/fancyapps/fancyBox/archive/master.zip, так что больше никаких взломов файлов js или css .
JFK

Ответы:

331

На самом деле это можно сделать с помощью помощника в Fancybox 2.

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

http://davekiss.com/prevent-fancybox-from-jumping-to-the-top-of-the-page/

Дэйв Кисс
источник
11
Это определенно способ сделать это. OP должен отметить это как принятый ответ. Спасибо тебе за это!
cfx
Полностью согласен. Принятый ответ (для удаления кода из fancybox2) - это взлом.
Роб Гонсалес
К сожалению, принятый ответ не менялся в течение целого года. Надеюсь, будущие пользователи реализуют это, а не ответ «вырезать код из плагина».
AndyWarren
5
Думаю, этот ответ не решает проблемы. Многим людям может не понравиться возможность прокрутки содержимого за fancybox (это произойдет, если lockedустановлено значение false). Это временное решение проблемы, которая может привести к возникновению другой проблемы в некоторых сценариях. Это была ошибка, и она была исправлена ​​в последней версии master github.com/fancyapps/fancyBox/archive/master.zip
JFK
1
@JFK Я согласен с тем, что это исправление может быть не идеальным из-за прокрутки, но я протестировал его с помощью последней версии мастера, и страница все равно перескакивает наверх. Тем не менее, он возвращается в исходное положение, когда fancybox закрывается.
Мистер Джонни Вуд
35

Jordanj77 правильный, но самое простое решение - просто перейти к таблице стилей jquery.fancybox.cssи закомментировать строку overflow: hidden !important;в разделе.fancybox-lock

быстрые рефлексы
источник
4
Это лучше, чем использование помощника, потому что с помощником страница продолжает прокручиваться под наложением с помощью колесика мыши. Комментирование переполнения не позволяет ему прыгать, но полоса прокрутки по-прежнему заблокирована для главной страницы.
Панама Джек
14

Я понимаю, что это старый вопрос, но думаю, что нашел для него хорошее решение. Проблема в том, что fancy box изменяет значение переполнения тела, чтобы скрыть полосы прокрутки браузера.

Как указывает Дэйв Кисс, мы можем помешать fancy box делать это, добавив следующие параметры:

$('.image').fancybox({
  padding: 0,
  helpers: {
    overlay: {
      locked: false
    }
  }
});

Но теперь мы можем прокручивать главную страницу, глядя на наше необычное окно. Это лучше, чем прыгать в начало страницы, но, вероятно, это не то, что нам действительно нужно.

Мы можем предотвратить прокрутку в правильном направлении, добавив следующие параметры:

    $('.image').fancybox({
      padding: 0,
      helpers: {
        overlay: {
          locked: false
        }
      },
    'beforeLoad': function(){
      disable_scroll();
        },
     'afterClose': function(){
       enable_scroll();
      }
    });

И добавьте эти функции из галамбалаза. См .: Как временно отключить прокрутку?

    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;  
    }
Joeran
источник
9

Проблема в том, что fancyBox изменяет значение переполнения тела, чтобы скрыть полосы прокрутки браузера. Я не мог найти возможность изменить это поведение.

Вы можете удалить этот раздел кода fancyBox, чтобы предотвратить это:

if (obj.locked) {
    this.el.addClass('fancybox-lock');

    if (this.margin !== false) {
        $('body').css('margin-right', getScalar( this.margin ) + obj.scrollbarWidth);
    }
}
jordanj77
источник
УРА! По этой же причине моя страница тогда прыгала на 20 пикселей влево. Спасибо! Вы решили 2 мои проблемы!
sheriffderek
Полосы прокрутки есть ... но я всегда использую overflow-y: scroll; в любом случае, так что для меня это честный компромисс.
sheriffderek
Я предполагаю, что это заблокирует работу колесика мыши - я буду продолжать искать и другие решения. Но, как я уже сказал, на данный момент это помогает!
sheriffderek
3
Если вы используете fancybox v2.1.5, похоже, что проблема была исправлена ​​в последней версии мастера, которую вы можете скачать здесь github.com/fancyapps/fancyBox/archive/master.zip, так что больше никаких взломов файлов js или css .
JFK
1
Это был лучший ответ в то время ... и если по какой-то причине у вас есть устаревший сайт или что-то в этом роде - считайте это ссылкой.
sheriffderek
6

Несмотря на то, что правильный способ решения этой проблемы - использовать параметры, которые предоставляет fancybox ( см. Этот ответ ), для решения проблемы можно использовать CSS. Нет необходимости редактировать файл css библиотеки, просто добавьте его в основную таблицу стилей приложения:

html.fancybox-lock {
    overflow: visible !important;
}

Код сбрасывает исходное переполнение элемента. Проблема в том, что overflow: hidden;на <html>элементе скрывается полоса прокрутки, из-за чего страница «прыгает» вверх. Чтобы сохранить положение полосы прокрутки, мы перезаписываем переполнение с помощьюoverflow: visible;

расширение
источник
Еще одна причина , почему это могло произойти потому , что <body>или / и <html>может бытьheight: 100%
thexpand
4

Это тоже помогло

.fancybox-lock body {
    overflow: visible !important;
}
Hsobhy
источник
1
Перезапись сторонних стилей - не лучшая идея, особенно если вам нужно использовать модификатор! Important, чтобы сломать каскад. Я призываю всех использовать исправление, предоставленное Дэйвом Киссом выше, а не это.
Фабиан Шёнер,
1

Принятый ответ не является полным, поскольку на самом деле он не решает проблему, а просто позволяет ее избежать! Вот более полный ответ, который на самом деле дает вам желаемую функциональность при исправлении проблемы перехода окна: 

        $('.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'); 
            }
        });
Ян
источник
0

Возможно, этот ответ запоздал, но, возможно, он может помочь в будущем, если после щелчка / закрытия изображения fancybox заставляет ваш сайт прокручиваться вверх, вы можете просто удалить:

F.trigger('onReady');

или лучше использовать: 

/*F.trigger('onReady');*/

В версии fancyBox: 2.1.5 (пятница, 14 июня 2013 г.) эта часть кода находится в строке 897.

Нахоми Атиас
источник
0

На самом деле вы можете кодировать вот так, если используете функцию fancybox по умолчанию:

    $(document).ready(function() {
        $(".fancybox").fancybox({
            padding: 0,
            helpers: {
                overlay: {
                  locked: false
                }
            }
        });
    });
Стил Рокки
источник
-4

Я исправил это с помощью:

overflow: hidden !important;

в .fancybox-lockтеле в jquery.fancybox.css. И полоса прокрутки не прыгает :)

user2684988
источник
4
Так говорили «быстрые рефлексы» около месяца назад.
BoltClock