处理溢出的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> 的字体大小以适应文档高度。 有没有更好的方法或插件来解决这个问题而不减少幻灯片中字符的数量？

- Vincent

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 - Reveal JS演示页面无法滚动 - 我从中获取了CSS代码

- Tahir Hassan

---

以下是对@TahirHassan的回答的修订，避免使用JQuery并为深色主题样式滚动条。 - Terry Brown

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;
}

- Terry Brown

---

谢谢您的回答，我使用了您的答案，它有效...但是有一个小错误。在resetSlideScolling()函数中，您执行.add()，但我认为应该在classList上执行.remove()。这个错误表现为当向后返回演示文稿时，内容被放置在顶部。更改为.remove()可以恢复行为并使滚动工作。 - kll

很好的解决方案。完美地工作了。我将 height: 800px 更改为 height: 100%; 以便更大地查看内容。谢谢。 - arshovon

我更喜欢这个答案，因为它更符合原始的JavaScript编码规范，但你的代码有一个错误！函数resetSlideScrolling应该删除类，而不是添加另一个类。也就是说，slide.classList.remove（'scrollable-slide'）; - abetusk

我不太擅长JS / JQuery / CSS / HTML，但我应该把这段代码放在哪里？我尝试将其分别放在reveal.js和reveal.css中，但是将其添加到reveal.js似乎已经破坏了它，并且幻灯片根本无法加载。有人可以指出这段代码应该放在哪里吗？ - Frak