100% полноэкранный скроллер Colorbox (jquery lightbox) не заменяет и не закрывает скроллер базового слоя

Question

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

На моей базовой странице у меня есть вертикальный список элементов портфолио в строках.Страница предназначена для прокрутки.Чтобы просмотреть изображения элемента портфолио, пользователь нажимает ссылку «просмотреть изображения проекта», чтобы развернуть лайтбокс, который расширяет браузер на 100%.Идея состоит в том, чтобы использовать лайтбокс для центрирования изображений портфолио в плавающем полноэкранном окне, и когда вы закрываете окно, пользователь возвращается на страницу внизу, в месте, которое он оставил.Это очень важно, потому что список пунктов портфеля ниже может быть длинным.Colorbox - это основной iframe.

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

www.joshua-butler.com / sample / home.html

Я хотел бы закрыть или удалить базовую полосу прокрутки.

Вот похожая проблема: jquery: Как я могу сбросить полосу прокрутки документа, когда я добавляю слой поверх документа? (я не мог понять, как использовать это для моих целей)

Если кто-то имеет лучшее решение для Colorbox или знает простое решение, пожалуйста, дайте мне знать.

Все решения для лайтбоксов, такие как Thickbox, Shadowbox и Lightbox, имеют эту проблему.

Заранее спасибо!Джош

Answer 1

Вы можете использовать обратные вызовы ColorBox onLoad и onClosed, чтобы изменить страницу overflow на скрытую (удаление полос прокрутки страницы), когда ColorBox активен.

$(".iframe").colorbox({
    iframe:true, 
    width:"100%", 
    height:"100%", 
    onLoad:function() {
        $('html, body').css('overflow', 'hidden'); // page scrollbars off
    }, 
    onClosed:function() {
        $('html, body').css('overflow', ''); // page scrollbars on
    }
});