scroll indicator

Author: jonas-eschmann

index.css

@@ -87,6 +87,7 @@ body {
     -webkit-overflow-scrolling: touch;
     scrollbar-width: auto;
     -ms-overflow-style: scrollbar;
+    position: relative; /* For absolute positioning of scroll indicator */
 }
 
 #controls-box::-webkit-scrollbar {
@@ -108,6 +109,7 @@ body {
 #controls-box::-webkit-scrollbar-thumb:hover {
     background: #555;
 }
+
 .controls-container {
     display: flex;
     justify-content: center;

index.html

@@ -54,6 +54,7 @@
         </label>
     </template>
     <link rel="stylesheet" href="./index.css">
+    <link rel="stylesheet" href="./scroll-indicator.css">
     <script type="importmap">
         {
             "imports": {
@@ -98,15 +99,15 @@
     <div id="controls-box">
         <div id="raptor-project-page" class="controls-container" style="display: none;">
             <center>
-                <h1 style="margin: 0; margin-bottom: 5px;"><img src="./blob/logo.svg" style="width: 13rem; vertical-align: middle;"></img>: A Foundation Policy for Quadrotor Control</h1>
+                <h1 style="margin: 0; margin-top: 10px; margin-bottom: 5px;"><img src="./blob/logo.svg" style="width: 13rem; vertical-align: middle;"></img>: A Foundation Policy for Quadrotor Control</h1>
                 <h3 style="margin: 0; margin-bottom: 10px;">Jonas Eschmann, Dario Albani, Giuseppe Loianno</h3>
                 <a class="fancy-button fancy-button-small" href="">Paper on ArXiV</a>
                 <a class="fancy-button fancy-button-small" href="https://github.com/rl-tools/foundation-policy">Code on Github</a>
                 <div id="video-container" style="margin: 10px; max-width: 900px; margin-left: auto; margin-right: auto;">
                     <div id="video-container-inner" style="position: relative; width: 100%; height: 0; padding-bottom: 56.25%; /* 16:9 aspect ratio */">
                     </div>
                 </div>
-                <div style="margin: 10px;">
+                <div style="margin: 10px; max-width: 900px;">
                     This web app allows you to torture the <img src="./blob/logo.svg" style="width: 7rem; vertical-align: middle;"></img> foundation policy using different quadrotor models, reference trajectories and disturbances. 
                     You can reset the episodes by pressing "Sample Initial States". You can simulate step-by-step using "Pause on Reset" and then "Step" throught the episode.
                     <br>
@@ -268,6 +269,7 @@ <h4 style="margin: 0px; margin-top: 5px;">Reproducing Oscillations Caused by Lin
         <div id="perturbation-groups" class="controls-container">
         </div>
     </div>
+    <div id="scroll-indicator">▼</div>
     <div id="drag-and-drop-overlay">Drop RLtools HDF5 checkpoint here!</div>
 </body>
 </html>

index.js

@@ -533,6 +533,28 @@ if (document.readyState === 'loading') {
     main()
 }
 
+function setupScrollIndicatorHiding() {
+    const scrollIndicator = document.getElementById('scroll-indicator');
+    const controlsBox = document.getElementById('controls-box');
+    if (scrollIndicator && controlsBox) {
+        controlsBox.addEventListener('scroll', function() {
+            const isAtBottom = controlsBox.scrollTop + controlsBox.clientHeight >= controlsBox.scrollHeight - 1;
+            if (isAtBottom) {
+                console.log("reached bottom, hiding scroll indicator");
+                scrollIndicator.classList.add('hidden');
+            } else {
+                scrollIndicator.classList.remove('hidden');
+            }
+        });
+    }
+}
+
+if (document.readyState === 'loading') {
+    document.addEventListener("DOMContentLoaded", setupScrollIndicatorHiding);
+} else {
+    setupScrollIndicatorHiding();
+}
+
 const drag_and_drop_overlay = document.getElementById('drag-and-drop-overlay');
 let drag_and_drop_counter = 0;
 

scroll-indicator.css

@@ -0,0 +1,38 @@
+#scroll-indicator {
+    position: fixed;
+    bottom: 16px;
+    left: calc(50% - 6px);
+    color: rgba(68, 68, 68, 0.9);
+    font-size: 18px;
+    pointer-events: none;
+    z-index: 1000;
+    background: rgba(255, 255, 255, 0.95);
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+    animation: softPulse 2.5s ease-in-out infinite;
+    
+    opacity: 0.8;
+    transition: opacity 0.3s ease;
+}
+
+#scroll-indicator.hidden {
+    opacity: 0;
+    pointer-events: none;
+    display: none;
+}
+
+@keyframes softPulse {
+    0%, 100% { 
+        opacity: 0.9; 
+        transform: translateX(-50%) translateY(0px); 
+    }
+    50% { 
+        opacity: 1.0; 
+        transform: translateX(-50%) translateY(2px); 
+    }
+}