fix scroll snapping in reader mode compact layout

hakimel · Oct 25, 2023 · e46bad3 · e46bad3
1 parent ff252c9
commit e46bad3
Show file tree

Hide file tree

Showing 7 changed files with 10 additions and 13 deletions.
diff --git a/css/reveal.scss b/css/reveal.scss
@@ -1946,10 +1946,6 @@ $notesWidthPercent: 25%;
 		overflow: hidden;
 	}
 
-	.reader-snap-point {
-		scroll-snap-align: start;
-	}
-
 	.reader-page section {
 		visibility: visible !important;
 		display: block !important;

diff --git a/dist/reveal.css b/dist/reveal.css
diff --git a/dist/reveal.esm.js b/dist/reveal.esm.js
diff --git a/dist/reveal.esm.js.map b/dist/reveal.esm.js.map
diff --git a/dist/reveal.js b/dist/reveal.js
diff --git a/dist/reveal.js.map b/dist/reveal.js.map
diff --git a/js/controllers/reader.js b/js/controllers/reader.js
@@ -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' );
 			}