Как предотвратить прокрутку страницы за fancybox-2

Ответ 1

По-видимому, Fancybox изменяет свойство CSS overflow на body на hidden, когда отображается изображение. Это заставляет фон прокручиваться назад. Все, что вам нужно сделать, это прокомментировать строку с текстом overflow: hidden !important; в разделе .fancybox-lock в таблице стилей jquery.fancybox.css.

Посмотрите fancybox2/fancybox, чтобы страница также могла перейти в начало.

Ответ 2

Это отлично работает для меня:

Добавьте следующие функции в инициализацию facnybox

beforeShow: function(){
    $("body").css({'overflow-y':'hidden'});
},
afterClose: function(){
    $("body").css({'overflow-y':'visible'});
}

Пример:

$(".fancyBoxTrigger").fancybox({
    maxWidth    : 820,
    maxHeight   : 670,
    fitToView   : false,
    width       : 760,
    height      : 580,
    autoSize    : false,
    closeClick  : false,
    openEffect  : 'none',
    closeEffect : 'none',
    padding     : 10,
    closeBtn    : false,
    beforeShow: function(){
        $("body").css({'overflow-y':'hidden'});
    },
    afterClose: function(){
        $("body").css({'overflow-y':'visible'});
    },
    helpers : {
        overlay : {
            opacity: 0.4,
            locked: false
        }
    }
});

Я надеюсь, что это сработает для вас.

Ответ 3

Это сработало для меня:

$.fancybox({
        scrolling   : 'hidden',
        helpers: {
            overlay: {
              locked: true 
            }
        });

Надеюсь, это поможет:)

Ответ 4

Мое предположение? Селектор, который вы нажимаете для запуска fancybox, скорее всего, является якорем с hashmark следующим:

<a href="#">

то вы получите fancybox href из ближайшего элемента <a>, как в вашем коде:

  beforeLoad: function(){
    this.title = getTitle(this);
    this.href = $(this.element).closest('a').attr('href');
  }

Здесь является DEMO, который воспроизводит поведение, которое вы описываете (прокручивайте контент до тех пор, пока вы не найдете миниатюру который запускает fancybox)

Если то, что я предположил выше, является правильным, тогда ваши возможные решения:

1). Измените hashmark в привязке href к hashtag #nogo как <a href="#nogo">

как указано Stuart Nicholls (cssplay) в своем обновлении от 15 марта 2005 года в связанном сообщении.

2). Или замените hashmark на ваш якорный атрибут href на javascript:; как <a href="javascript:;">

См. обновленный JSFIDDLE, используя первый вариант.

Ответ 5

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

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

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

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

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

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

Ответ 6

Вы можете попробовать следующее: -

beforeShow: function(){
 $("body").css({'overflow-y':'hidden'});
},

afterClose: function(){
 $("body").css({'overflow-y':'visible'});

} 

Он останавливает вертикальную прокрутку на родительской странице, пока открыт fancybox.

Ответ 7

В jquery.fancybox.css → .fancybox-lock
изменить:
overflow: hidden !important;
to:
overflow: visible !important;
работает для меня:)

Ответ 8

Мое изменение, это поможет мне

/* Fancybox */
$('.fancybox').fancybox({
    beforeShow: function(){
        $("body").css({
            "overflow-y": "hidden",
            "position": "fixed"
            }
        );
    },
    afterClose: function(){
        $("body").removeAttr("style");
    }
});

Ответ 9

$('.fancybox').fancybox({
 'beforeLoad': function(){
   disable_scroll();
    },
 'afterClose': function(){
   enable_scroll();
  }
});

var disabled_scroll = false;

function disable_scroll() {
  disabled_scroll = true;
}

function enable_scroll() {
  disabled_scroll = false;
}

в fullPage.js

function scrollPage(element, callback, isMovementUp)
{
   if(disabled_scroll) return;
   .....
}