Javascript 处理溢出幻灯片的最佳方法

我正在做一个项目，我正在使用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；
如果（截面底部>允许高度）{
var cur_font_size=parseInt（$present_section.css（'font-size'））；
$present\u section.css（'font-size'，cur\u font\u size-1）；
}

在递归循环中运行此代码将调整

的字体大小以适应文档高度

---

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

定义CSS类

可滚动幻灯片

：

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

如果要在可滚动时去除

框阴影

和

背景

，请添加以下CSS样式：

.scrollable-slide::before {
    background: none !important;
}

.scrollable-slide::after {
    box-shadow: none !important;
}

参考文献：

• -包括API信息
• -我从哪里得到的CSS

---

这里是@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;
}

---

我下面的答案只是@TahirHassan的一个修订版，它避免了在黑色主题中使用JQuery和样式滚动条。。。除了有一个小虫子。在resetSlideColling（）函数中，您可以在我认为应该在类列表中的.remove（）时执行.add（）。缺陷表现为，当在演示文稿中倒退时，内容被放在顶部。更改为.remove（）可恢复行为和滚动效果。这是一个很好的干净解决方案。工作得很有魅力。我将

高度：800px

更改为

高度：100%用于内容的更大视图。谢谢。我更喜欢这个答案，因为它更普通，但是你的代码有一个bug！函数
resetSlideScrolling
应删除该类，而不是添加其他类。也就是说，
slide.classList.remove（'scrollable-slide'）