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