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

я реализовал fancybox2 на сайте dev.

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

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

101
css fancybox-2 jquery

10 ответов

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

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

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

323

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

34

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

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

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

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

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

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

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

    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;  
    }
13

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

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

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

    if (this.margin !== false) {
        $('body').css('margin-right', getScalar( this.margin ) + obj.scrollbarWidth);
    }
}
9

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

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

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

6

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

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

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

        $('.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'); 
            }
        });
1

может быть, этот ответ alil поздно, но, возможно, это может помочь в будущем, если после clicling / закрытия изображения 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
                }
            }
        });
    });
0

я исправил это с:

overflow: hidden !important;

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

-4