Лучший способ справиться с переполнением слайда Reveal JS

Question

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

Иногда я нахожу текст, выходящий за пределы области просмотра.

Из-за чего текст не виден, как показано на этом изображении

Я попытался уменьшить размер текста динамически в зависимости от высоты экрана, например так:

var $present_section = $('section.present');
var section_bottom = $present_section.offset().top + $present_section.height();
var allowed_height = $(document).height() - $present_section.offset().top;

if (section_bottom > allowed_height) {
    var cur_font_size = parseInt($present_section.css('font-size'));
    $present_section.css('font-size', cur_font_size - 1);
}

выполнение этого кода в рекурсивном цикле отрегулирует <section>Размер шрифта для настройки по высоте документа.

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

Answer 1

Определите класс CSS scrollable-slide:

.scrollable-slide {
    height: 800px;
    overflow-y: auto !important;
}

Определите слушателей, которые добавляют вышеупомянутый класс CSS к слайду, если он слишком большой. Для этого вам понадобится jQuery.

function resetSlideScrolling(slide) {
    $(slide).removeClass('scrollable-slide');
}

function handleSlideScrolling(slide) {
    if ($(slide).height() >= 800) {
        $(slide).addClass('scrollable-slide');
    }
}

Reveal.addEventListener('ready', function (event) {
    handleSlideScrolling(event.currentSlide);
});

Reveal.addEventListener('slidechanged', function (event) {
    resetSlideScrolling(event.previousSlide)
    handleSlideScrolling(event.currentSlide);
});

Если вы хотите избавиться от box-shadow а также background когда это прокручивается, тогда добавьте эти стили CSS:

.scrollable-slide::before {
    background: none !important;
}

.scrollable-slide::after {
    box-shadow: none !important;
}

Рекомендации:

• Веб-сайт Reveal JS - содержит информацию об API
• SO - выявить JS Невозможно прокрутить слайды - где я получил CSS

Answer 2

Вот бесплатная версия ответа @ThairHassan на JQuery, вероятно, она не работает в старых браузерах, если вы заботитесь об этом.

Это на самом деле просто альтернативная версия ответа @ThairHassan, я думаю, что было бы лучше, чтобы поднять мой комментарий к этому ответу, чем этот ответ.

function resetSlideScrolling(slide) {
    slide.classList.add('scrollable-slide');
}

function handleSlideScrolling(slide) {
    if (slide.scrollHeight >= 800) {
        slide.classList.add('scrollable-slide');
    }
}

Reveal.addEventListener('ready', function (event) {
    handleSlideScrolling(event.currentSlide);
});

Reveal.addEventListener('slidechanged', function (event) {
    if (event.previousSlide) {
        resetSlideScrolling(event.previousSlide);
    }
    handleSlideScrolling(event.currentSlide);
});

И CSS, как и выше, но в демо-версии создается темная полоса прокрутки, если вы используете темную тему. Это также может работать не во всех браузерах.

.scrollable-slide {
    height: 800px;
    overflow-y: auto !important;
}
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
::-webkit-scrollbar-thumb {
  background-color: #333;
}
::-webkit-scrollbar-corner {
  background-color: #333;
}