javascript - 处理溢出Reveal JS幻灯片的最佳方法

我正在一个项目中，我正在使用Reveal JS以幻灯片的形式向用户展示数据。
有时我发现文本超出视口(viewport)溢出。
由于该原因，该文本不可见，如图所示


我尝试根据屏幕高度动态减小文本大小，如下所示:

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>的字体大小以调整到文档高度。

是否有更好的方法或插件来处理此问题而不减少幻灯片中的字符数？

最佳答案

定义CSS类scrollable-slide:

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

定义侦听器，如果侦听器太大，则将其添加到幻灯片中。为此，您将需要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 Website-包含API信息

SO - Reveal JS Unable to scroll in the slides-在哪里获得CSS

关于javascript - 处理溢出Reveal JS幻灯片的最佳方法，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35237862/