处理溢出的 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

这是@ThairHassan 的答案的 JQuery 免费版本，如果您关心的话，这可能无法在旧浏览器上运行。

这实际上只是@ThairHassan 答案的替代版本，我认为对我的答案的评论比这个答案更好。

function resetSlideScrolling(slide) {
    slide.classList.remove('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;
}

Answer 2

定义 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 的地方