显示JS无法在幻灯片中滚动 [英] Reveal JS Unable to scroll in the slides

问题描述

我使用Reveal JS进行演示。

I'm using Reveal JS for making a presentation.

如果我在标签中放置更多文字，它会在屏幕下方隐藏。但是没有滚动条到右边。想要我是否可以做一个CSS修复，带来一个垂直滚动条，并使隐藏的内容通过滚动显示。

If I put more text in the tag, it is going below the screen hidden from view. But there is no scroll bar to the right. Wondering if I can do a css fix to bring in a vertical scroll bar and make the hidden content visible by scrolling.

这里是要改变的CSS（我认为）

Here is the CSS to be changed (I think)

.reveal .slides section .fragment {
    opacity: 0;

    -webkit-transition: all .2s ease;
       -moz-transition: all .2s ease;
        -ms-transition: all .2s ease;
         -o-transition: all .2s ease;
            transition: all .2s ease;
}
    .reveal .slides section .fragment.visible {
        opacity: 1;
    }

.reveal .slides section .fragment.grow {
    opacity: 1;
}
    .reveal .slides section .fragment.grow.visible {
        -webkit-transform: scale( 1.3 );
           -moz-transform: scale( 1.3 );
            -ms-transform: scale( 1.3 );
             -o-transform: scale( 1.3 );
                transform: scale( 1.3 );
    }

.reveal .slides section .fragment.shrink {
    opacity: 1;
}
    .reveal .slides section .fragment.shrink.visible {
        -webkit-transform: scale( 0.7 );
           -moz-transform: scale( 0.7 );
            -ms-transform: scale( 0.7 );
             -o-transform: scale( 0.7 );
                transform: scale( 0.7 );
    }

.reveal .slides section .fragment.zoom-in {
    opacity: 0;

    -webkit-transform: scale( 0.1 );
       -moz-transform: scale( 0.1 );
        -ms-transform: scale( 0.1 );
         -o-transform: scale( 0.1 );
            transform: scale( 0.1 );
}

    .reveal .slides section .fragment.zoom-in.visible {
        opacity: 1;

        -webkit-transform: scale( 1 );
           -moz-transform: scale( 1 );
            -ms-transform: scale( 1 );
             -o-transform: scale( 1 );
                transform: scale( 1 );
    }

.reveal .slides section .fragment.roll-in {
    opacity: 0;

    -webkit-transform: rotateX( 90deg );
       -moz-transform: rotateX( 90deg );
        -ms-transform: rotateX( 90deg );
         -o-transform: rotateX( 90deg );
            transform: rotateX( 90deg );
}
    .reveal .slides section .fragment.roll-in.visible {
        opacity: 1;

        -webkit-transform: rotateX( 0 );
           -moz-transform: rotateX( 0 );
            -ms-transform: rotateX( 0 );
             -o-transform: rotateX( 0 );
                transform: rotateX( 0 );
    }

.reveal .slides section .fragment.fade-out {
    opacity: 1;
}
    .reveal .slides section .fragment.fade-out.visible {
        opacity: 0;
    }

.reveal .slides section .fragment.semi-fade-out {
    opacity: 1;
}
    .reveal .slides section .fragment.semi-fade-out.visible {
        opacity: 0.5;
    }

.reveal .slides section .fragment.highlight-red,
.reveal .slides section .fragment.highlight-green,
.reveal .slides section .fragment.highlight-blue {
    opacity: 1;
}
    .reveal .slides section .fragment.highlight-red.visible {
        color: #ff2c2d
    }
    .reveal .slides section .fragment.highlight-green.visible {
        color: #17ff2e;
    }
    .reveal .slides section .fragment.highlight-blue.visible {
        color: #1b91ff;
    }

推荐答案

/ p>

I solved this with:

.scrollable {
    overflow-y: auto  !important;
    overflow-x: hidden !important;
    height: 700px;
}

将上层类添加到幻灯片标签（部分）

add the upper class to a slide tag (section) to make it scrollable.

这篇关于显示JS无法在幻灯片中滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！