Jquery Colorbox прокручивает все окно, а не только содержимое внутри colorbox

Я использую Jquery Colorbox для отображения информации во всплывающем окне colorbox.

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

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

Есть ли способ предотвратить это? Надеюсь, это имеет смысл.


scroll jquery colorbox
person John    schedule 17.03.2011    source источник

Ответы (4)


arrow_upward
4
arrow_downward

Один из способов сделать это — установить скрытое переполнение документа при открытии диалогового окна ColorBox, а затем вернуть его, когда оно закроется. Вы можете привязываться к пользовательским событиям jQuery, которые использует ColorBox:

$(document).bind('cbox_open', function () {
    $('html').css({ overflow: 'hidden' });
}).bind('cbox_closed', function () {
    $('html').css({ overflow: 'auto' });
});

Есть небольшой скачок, когда полоса прокрутки в родительском окне исчезает и появляется снова. Меня это беспокоило, поэтому я использовал метод колесика мыши, как описано в этом вопросе SO: Предотвратить прокрутку родительского элемента?

Мое использование немного сложно, потому что я использую iframe внутри ColorBox и явно устанавливаю полосу прокрутки. Я запустил скрипт на странице iframe, привязал его к событию колесика мыши и остановил распространение в нижней части элемента. Для простого использования ColorBox у вас должна быть возможность создать повторно используемое решение, привязав событие колесика мыши к прокручиваемому элементу в фрейме ColorBox.

person Joel Fillmore    schedule 04.06.2011

arrow_upward
2
arrow_downward

Если я правильно понимаю, я полагаю, что у меня такая же/похожая проблема с банкоматом colorbox. Я нашел это решение, которое сработало для меня, в открытой проблеме на GitHub, опубликованной senechaux.

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

$(document).on('cbox_open',function(){
  $(document.body).css('position','fixed');
}).on('cbox_closed',function(){
  $(document.body).css('position','');
});
person setzuiro    schedule 25.05.2016

arrow_upward
1
arrow_downward

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

jQuery('.selector').colorbox({
    onOpen: function(){
        $('body').css({ overflow: 'hidden' });
    },
    onClosed: function(){
        $('body').css({ overflow: '' });
    }
});

Источник: http://www.jacklmoore.com/colorbox/faq/#faq-scrolling

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

person Roy Shoa    schedule 24.02.2016

arrow_upward
0
arrow_downward

Если вы хотите прокручивать только цветовую рамку, а не само окно, вы можете сделать

$(window).scroll(function() {
    $(this).scrollTop(0)
})

Вы можете изменить это дальше, чтобы соответствовать вашим потребностям.

Проверьте рабочий пример на http://jsfiddle.net/vQHDJ/.

person Hussein    schedule 17.03.2011
comment
Добавлять ли этот код во всплывающую цветовую рамку страницы или мне нужно добавить его в родительское окно? - person John; 17.03.2011
comment
Добавьте его в любом месте. Вы также можете добавить его после вашего скрипта jquery, например <script type = "text/javascript" > $(window).scroll(function() { $(this).scrollTop(0) }) < /script> - person Hussein; 17.03.2011