don't show reader scroll bar when there is no overflow, reader style tweaks

css/reveal.scss

@@ -1882,8 +1882,9 @@ $notesWidthPercent: 25%;
 		overflow-y: auto;
 		z-index: 1;
 
-		--r-reader-progress-width: 8px;
+		--r-reader-progress-width: 7px;
 		--r-reader-progress-trigger-size: 5px;
+		--r-controls-spacing: 8px;
 	}
 
 	@media screen and (max-width: 500px) {
@@ -2015,18 +2016,6 @@ $notesWidthPercent: 25%;
 		z-index: 10;
 	}
 
-	// Hit area
-	.reader-progress-inner:after {
-		content: '';
-		position: absolute;
-		width: 200%;
-		height: 100%;
-		top: 0;
-		left: -50%;
-		background: rgba( 0, 0, 0, 0 );
-		z-index: -1;
-	}
-
 	.reader-progress-playhead {
 		position: absolute;
 		width: var(--r-reader-progress-width);
@@ -2036,7 +2025,7 @@ $notesWidthPercent: 25%;
 		border-radius: var(--r-reader-progress-width);
 		background-color: rgba(var(--r-overlay-element-bg-color), 1);
 		z-index: 11;
-		transition: background-color 0.2s ease, height 0.4s ease;
+		transition: background-color 0.2s ease;
 	}
 
 	.reader-progress-slide {
@@ -2048,6 +2037,19 @@ $notesWidthPercent: 25%;
 		transition: background-color 0.2s ease;
 	}
 
+	// Hit area
+	.reader-progress-slide:after {
+		content: '';
+		position: absolute;
+		width: 200%;
+		height: 100%;
+		top: 0;
+		left: -50%;
+		background: rgba( 0, 0, 0, 0 );
+		z-index: -1;
+	}
+
+	.reader-progress-slide:hover,
 	.reader-progress-slide.active {
 		background-color: rgba(var(--r-overlay-element-bg-color), 0.4);
 	}

examples/reader-mode.html

@@ -21,6 +21,15 @@
 			<div class="slides">
 
 				<section><h1>Reader Mode</h1></section>
+				<section data-background="indigo">
+					<h2>Scroll triggers</h2>
+					<ul>
+						<li class="fragment fade-left">Step one</li>
+						<li class="fragment fade-left">Step two</li>
+						<li class="fragment fade-left">Step three</li>
+					</ul>
+				</section>
+				<section data-background-color="#fff"><h2>Scroll bar inverts<br>based on slide bg</h2></section>
 				<section data-auto-animate data-auto-animate-easing="cubic-bezier(0.770, 0.000, 0.175, 1.000)">
 					<h2>Auto-Animate</h2>
 					<p>Automatically animate matching elements across slides with <a href="https://revealjs.com/auto-animate/">Auto-Animate</a>.</p>
@@ -46,14 +55,6 @@
 					</div>
 					<h2 style="margin-top: 20px;">Auto-Animate</h2>
 				</section>
-				<section data-background="indigo">
-					<h2>Scroll triggers</h2>
-					<ul>
-						<li class="fragment">Fragment one</li>
-						<li class="fragment">Fragment two</li>
-						<li class="fragment">Fragment three</li>
-					</ul>
-				</section>
 				<section data-background-gradient="linear-gradient(to bottom, #283b95, #17b2c3)" id="gradient-bg">
 					<h2>Gradient Backgrounds</h2>
 				</section>
@@ -98,7 +99,6 @@
             <h2>Video background</h2>
           </section>
         </section>
-				<section data-background-color="#fff"><h2>White background</h2></section>
 				<section><h2>The end</h2></section>
 
 			</div>

js/controllers/reader.js

@@ -363,7 +363,7 @@ export default class Reader {
 
 		this.viewportElement.setAttribute( 'data-reader-scroll-bar', config.readerScrollbar )
 
-		if( config.readerScrollbar ) {
+		if( config.readerScrollbar && this.pages.length > 1 ) {
 			// Create the progress bar if it doesn't already exist
 			if( !this.progressBar ) this.createProgressBar();
 

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "reveal.js",
-  "version": "4.6.0",
+  "version": "4.6.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "reveal.js",
-      "version": "4.6.0",
+      "version": "4.6.1",
       "license": "MIT",
       "devDependencies": {
         "@babel/core": "^7.14.3",