Question

我正在使用Reveal JS进行演示。

如果我在标签中放入了更多文字，它就会隐藏在视线之外的屏幕下方。但是右边没有滚动条。想知道我是否可以进行css修复以引入垂直滚动条并通过滚动显示隐藏的内容。

这是要更改的CSS（我认为）

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

Answer 1

我用以下方法解决了这个问题：

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

将上层类添加到幻灯片标记（部分）以使其可滚动。

显示JS无法滚动幻灯片

1 个答案: