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类(function () { 'use strict'; angular.module('mymodule', []) .service('myService', function () { var userInfo = {id : '', name : '' }; this.getUserInfo = function(){ return userInfo;}; var myPropertyPrivateVal; Object.defineProperty(this, 'myProperty', { get: function () { return myPropertyPrivateVal; }, set: function(value) { myPropertyPrivateVal = value; } }); }); })();：

thread.setContextClassLoader(null)

定义将上面的CSS类添加到幻灯片中的侦听器（如果它太大）。为此，您将需要jQuery。

scrollable-slide

如果你想在可滚动时摆脱.scrollable-slide { height: 800px; overflow-y: auto !important; }和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样式：

box-shadow

<强>参考文献：

Reveal JS Website - 包含API信息
SO - Reveal JS Unable to scroll in the slides - 我在哪里获得了CSS

Answer 2

这里是@ThairHassan答案的JQuery免费版本，如果您对此有所关注，则可能无法在旧的浏览器上运行。

这实际上只是@ThairHassan答案的替代版本，我认为最好是对我对该答案的评论胜过此答案。

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

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

2 个答案: