ha-kiosk-dashboard/inject-scroll-via-browser-mod.md

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:

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)