Only enable drag scroll controller when needed (#25351)

src/common/controllers/drag-scroll-controller.ts

@@ -9,6 +9,7 @@ import type { LitElement } from "lit";
  */
 export interface DragScrollControllerConfig {
   selector: string;
+  enabled?: boolean;
 }
 
 export class DragScrollController implements ReactiveController {
@@ -28,19 +29,47 @@ export class DragScrollController implements ReactiveController {
 
   private _scrollContainer?: HTMLElement | null;
 
+  private _enabled = true;
+
+  public get enabled(): boolean {
+    return this._enabled;
+  }
+
+  public set enabled(value: boolean) {
+    if (value === this._enabled) {
+      return;
+    }
+    this._enabled = value;
+    if (this._enabled) {
+      this._attach();
+    } else {
+      this._detach();
+    }
+    this._host.requestUpdate();
+  }
+
   constructor(
     host: ReactiveControllerHost & LitElement,
-    { selector }: DragScrollControllerConfig
+    { selector, enabled }: DragScrollControllerConfig
   ) {
     this._selector = selector;
     this._host = host;
+    this.enabled = enabled ?? true;
     host.addController(this);
   }
 
   hostUpdated() {
-    if (this._scrollContainer) {
+    if (!this.enabled || this._scrollContainer) {
       return;
     }
+    this._attach();
+  }
+
+  hostDisconnected() {
+    this._detach();
+  }
+
+  private _attach() {
     this._scrollContainer = this._host.renderRoot?.querySelector(
       this._selector
     );
@@ -49,9 +78,18 @@ export class DragScrollController implements ReactiveController {
     }
   }
 
-  hostDisconnected() {
+  private _detach() {
     window.removeEventListener("mousemove", this._mouseMove);
     window.removeEventListener("mouseup", this._mouseUp);
+    if (this._scrollContainer) {
+      this._scrollContainer.removeEventListener("mousedown", this._mouseDown);
+      this._scrollContainer = undefined;
+    }
+    this.scrolled = false;
+    this.scrolling = false;
+    this.mouseIsDown = false;
+    this.scrollStartX = 0;
+    this.scrollLeft = 0;
   }
 
   private _mouseDown = (event: MouseEvent) => {

src/panels/lovelace/views/hui-view-header.ts

@@ -54,6 +54,7 @@ export class HuiViewHeader extends LitElement {
 
   private _dragScrollController = new DragScrollController(this, {
     selector: ".scroll",
+    enabled: false,
   });
 
   connectedCallback(): void {
@@ -81,6 +82,11 @@ export class HuiViewHeader extends LitElement {
       this._checkHidden();
     }
 
+    if (changedProperties.has("config") || changedProperties.has("lovelace")) {
+      this._dragScrollController.enabled =
+        !this.lovelace.editMode && this.config?.badges_wrap === "scroll";
+    }
+
     if (changedProperties.has("config")) {
       if (this.config?.card) {
         this.card = this._createCardElement(this.config.card);