Выявить JS Невозможно прокрутить слайды
Я использую 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;
}
1 ответ
Я решил это с:
.scrollable {
overflow-y: auto !important;
overflow-x: hidden !important;
height: 700px;
}
добавьте верхний класс в тег слайда (раздел), чтобы сделать его прокручиваемым.