wip

Author: vursen

packages/grid/src/styles/vaadin-grid-base-styles.js

@@ -161,6 +161,24 @@ export const gridStyles = css`
     border: var(--_row-border-width) var(--_border-color);
   }
 
+  #header::before,
+  #footer::before {
+    position: absolute;
+    inset: 0;
+    border-block: var(--_row-border-width) solid var(--_border-color);
+    transform: translateX(var(--_grid-horizontal-scroll-position));
+  }
+
+  :host([overflow~='top']) #table[has-header] #header::before {
+    content: '';
+    inset-block-end: calc(var(--_row-border-width) * -1);
+  }
+
+  :host([overflow~='bottom']) #table[has-footer] #footer::before {
+    content: '';
+    inset-block-start: calc(var(--_row-border-width) * -1);
+  }
+
   [part~='cell']:where(:not([part~='details-cell'])) {
     flex-shrink: 0;
     flex-grow: 1;
@@ -474,6 +492,10 @@ export const gridStyles = css`
     inset-block-end: 0;
   }
 
+  #footer [part~='row']:first-child::after {
+    inset-block-start: calc(var(--_row-border-width) * -1);
+  }
+
   :host([navigating]) [part~='row']:focus,
   :host([navigating]) [part~='cell']:focus {
     outline: 0;

packages/grid/src/vaadin-grid-scroll-mixin.js

@@ -445,26 +445,7 @@ export const ScrollMixin = (superClass) =>
         }
       });
 
-      const focusedRow = this.shadowRoot.querySelector("[part~='row']:focus");
-      if (focusedRow) {
-        // Update the horizontal scroll position property of the focused row
-        this.__updateRowScrollPositionProperty(focusedRow);
-      }
-    }
-
-    /**
-     * Synchronizes the internal `--_grid-horizontal-scroll-position` CSS property
-     * of the given row with the current horizontal scroll position of the grid.
-     * @private
-     */
-    __updateRowScrollPositionProperty(row) {
-      if (row instanceof HTMLTableRowElement === false) {
-        return;
-      }
-      const newValue = `${this.__horizontalScrollPosition}px`;
-      if (row.style.getPropertyValue('--_grid-horizontal-scroll-position') !== newValue) {
-        row.style.setProperty('--_grid-horizontal-scroll-position', newValue);
-      }
+      this.$.table.style.setProperty('--_grid-horizontal-scroll-position', `${this.__horizontalScrollPosition}px`);
     }
 
     /** @private */