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

Question

我正在做一个元素，我正在使用 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>的字体大小以适应文档高度。

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

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 Website - 包括 API 信息
• SO - Reveal JS Unable to scroll in the slides - 我从哪里得到 CSS