【问题标题】:Reveal JS Unable to scroll in the slidesReveal JS 无法在幻灯片中滚动
【发布时间】:2015-12-30 17:58:33
【问题描述】:

我正在使用 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;
    }

【问题讨论】:

  • 我只是想知道你是否已经解决了这个问题?
  • @baidao 不幸的是我没有。我希望我有时是一名设计师而不是一名工程师:)

标签: javascript css scrollbar reveal.js


【解决方案1】:

我解决了这个问题:

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

将上层类添加到幻灯片标签(部分)以使其可滚动。

【讨论】:

  • 你能澄清一下这是什么意思吗: > 将上层类添加到幻灯片标签(部分)以使其可滚动。谢谢!
  • @daaronr 我也不精通 js,但我通过将上面的代码放在 <style></style> 之间然后开始一个应该可以使用 <section class="scrollable"> 滚动的幻灯片来让它工作。还有answers 用于在任何内容过大的地方自动获取滚动条。
猜你喜欢
  • 2020-07-19
  • 2016-05-16
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多