mirror/reveal.js
1
0
Fork 0
mirror of https://github.com/hakimel/reveal.js.git synced 2025-07-31 20:00:28 +02:00
Code Issues Releases Wiki Activity

fix scroll snapping in reader mode compact layout

Browse Source
This commit is contained in:
Hakim El Hattab
2023-10-25 13:08:41 +02:00
parent ff252c984f
commit e46bad392a
7 changed files with 10 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
css/reveal.scss
View File

@@ -1946,10 +1946,6 @@ $notesWidthPercent: 25%;
overflow: hidden;
}
.reader-snap-point {
scroll-snap-align: start;
}
.reader-page section {
visibility: visible !important;
display: block !important;

2
dist/reveal.css vendored
View File

File diff suppressed because one or more lines are too long

2
dist/reveal.esm.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/reveal.esm.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
dist/reveal.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/reveal.js.map vendored
View File

File diff suppressed because one or more lines are too long

9
js/controllers/reader.js
View File

@@ -270,14 +270,14 @@ export default class Reader {
const slideSize = this.Reveal.getComputedSlideSize( window.innerWidth, window.innerHeight );
const scale = this.Reveal.getScale();
const readerLayout = config.readerLayout;
const useCompactLayout = config.readerLayout === 'compact';
const viewportHeight = this.viewportElement.offsetHeight;
const compactHeight = slideSize.height * scale;
const pageHeight = readerLayout === 'full' ? viewportHeight : compactHeight;
const pageHeight = useCompactLayout ? compactHeight : viewportHeight;
// The height that needs to be scrolled between scroll triggers
const scrollTriggerHeight = viewportHeight;
const scrollTriggerHeight = useCompactLayout ? compactHeight : viewportHeight;
this.viewportElement.style.setProperty( '--page-height', pageHeight + 'px' );
this.viewportElement.style.scrollSnapType = typeof config.readerScrollSnap === 'string' ?
@@ -335,6 +335,7 @@ export default class Reader {
const triggerStick = document.createElement( 'div' );
triggerStick.className = 'reader-snap-point';
triggerStick.style.height = scrollTriggerHeight + 'px';
triggerStick.style.scrollSnapAlign = useCompactLayout ? 'center' : 'start';
page.pageElement.appendChild( triggerStick );
if( i === 0 ) {
@@ -345,7 +346,7 @@ export default class Reader {
// In the compact layout, only slides with scroll triggers cover the
// full viewport height. This helps avoid empty gaps before or after
// a sticky slide.
if( readerLayout === 'compact' && page.scrollTriggers.length > 0 ) {
if( useCompactLayout && page.scrollTriggers.length > 0 ) {
page.pageHeight = viewportHeight;
page.pageElement.style.setProperty( '--page-height', viewportHeight + 'px' );
}