Add inject-scroll-via-browser-mod.md

inject-scroll-via-browser-mod.md

@@ -0,0 +1,56 @@
+# Auto-Scroll Dashboard Setup Guide
+
+## Method 1: Using Browser Mod (Recommended)
+
+If you have **browser_mod** installed:
+
+1. Add this to your dashboard YAML (already included in `dashboard-kiosk-with-scroll.yaml`)
+2. Create an automation in Home Assistant:
+
+```yaml
+automation:
+  - alias: "Kiosk Auto-Scroll"
+    trigger:
+      - platform: state
+        entity_id: browser_mod.browser_kiosk
+        to: "on"
+    action:
+      - service: browser_mod.execute_script
+        target:
+          entity_id: browser_mod.browser_kiosk
+        data:
+          command: |
+            (function() {
+              const cards = Array.from(document.querySelectorAll('ha-card'));
+              cards.forEach(card => card.style.minHeight = window.innerHeight + 'px');
+              let i = 0;
+              setInterval(() => {
+                i = (i + 1) % cards.length;
+                cards[i].scrollIntoView({ behavior: 'smooth', block: 'start' });
+              }, 5000);
+              window.scrollTo({ top: 0, behavior: 'smooth' });
+            })();
+```
+
+## Method 2: Manual JavaScript Injection
+
+1. Open the dashboard in Firefox
+2. Press F12 to open Developer Tools
+3. Go to Console tab
+4. Paste the code from `dashboard-auto-scroll.js`
+5. Press Enter
+
+The script will:
+- Make each card full viewport height
+- Auto-scroll every 5 seconds
+- Loop through all cards
+
+## Method 3: Using card-mod with CSS Animation (Limited)
+
+CSS-only scrolling is tricky. The JavaScript method is more reliable.
+
+## Files Created:
+
+- `dashboard-kiosk-with-scroll.yaml` - Dashboard with card-mod styling
+- `dashboard-auto-scroll.js` - JavaScript for auto-scrolling
+- `dashboard-kiosk-cardmod.yaml` - Dashboard with card-mod (no auto-scroll JS)