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

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

2 голосов
/ 17 марта 2011

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

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

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

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

Ответы [ 4 ]

4 голосов
/ 04 июня 2011

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

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

Существует небольшой скачок, когда полоса прокрутки в родительском окне исчезает и снова появляется.Это беспокоило меня, поэтому я использовал метод mousewheel, как описано в этом вопросе SO: Запретить прокрутку родительского элемента?

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

2 голосов
/ 25 мая 2016

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

$(document).on('cbox_open',function(){
  $(document.body).css('position','fixed');
}).on('cbox_closed',function(){
  $(document.body).css('position','');
});
0 голосов
/ 24 февраля 2016

Вы также можете добавить следующие события в инициал 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: ''.

0 голосов
/ 17 марта 2011

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

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

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

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

...