# EuiScrollHandlerDirective

**Type:** directive

<p>Directive toggling CSS class on app header when scrolling past a threshold.
Monitors window scroll position and adds &#39;shrink-header-active&#39; class to app wrapper.
Requires specific DOM structure with &#39;app-wrapper&#39; and &#39;app-header&#39; element IDs.
Typically used for sticky headers that shrink or change appearance on scroll.</p>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;div id=&quot;app-wrapper&quot;&gt;
  &lt;header id=&quot;app-header&quot;&gt;Header content&lt;/header&gt;
  &lt;main [euiScrollHandler]=&quot;true&quot;&gt;Main content&lt;/main&gt;
&lt;/div&gt;</code></pre></div><h3>Accessibility</h3>
<ul>
<li>Visual feedback for scroll position</li>
<li>Does not affect keyboard navigation or screen readers</li>
<li>Ensure header remains accessible in both states</li>
</ul>
<h3>Notes</h3>
<ul>
<li>Requires elements with IDs &#39;app-wrapper&#39; and &#39;app-header&#39;</li>
<li>Class &#39;shrink-header-active&#39; added when scrolled past header height</li>
<li>Scroll threshold automatically calculated from header height</li>
<li>Set euiScrollHandler to false to disable</li>
</ul>


**Selector:** `[euiScrollHandler]`

**Standalone:** false

## Inputs

- **euiScrollHandler**: `boolean` - 
