# CSS scroll-state()

Chrome 133 မှာ scroll state container queries ကိုစပြီးတော့ မိတ်ဆက်လာတယ်\
sticky positioning, scroll snap points, scrollable elements ဒီလို state တွေကို CSS ကနေ query လုပ်လို့ ရသွားပါပြီ<br>

### Overview <a href="#overview" id="overview"></a>

scroll state queries တွေမရှိခင်ကဆိုရင် အပေါ်မှာပြောခဲ့တဲ့ state တွေ ဥပမာ element တစ်ခုသည် sticky ဖြစ်နေသလား၊ scroll area ထဲမှာရှိသေးလား မရှိတော့ဘူးလား၊ overflow ဖြစ်ပြီး scroll လုပ်လို့ရနေတာလား ဆိုတာတွေကို စစ်ဖို့ JavaScript ကနေပဲ လုပ်ရတယ်၊ အခုကျ JavaScript မလိုတော့ဘဲ CSS နဲ့တင် အဆင်ပြေသွားတယ်ပေါ့\
\
scroll state queries တွေအကြောင်းပြောချင်ရင် container queries တွေကိုတော့အရင်ဖတ်ထားဖို့လိုပါတယ်

အဓိကကတော့ scroll state queries သုံးမျိုးရှိမယ်

#### Stuck state

သူကတော့ element တစ်ခုက အစွန်ဆုံးတစ်ဖက်မှာ stuck ဖြစ်နေတဲ့ အခြေနေ ဆိုလိုတာက sticky ဖြစ်နေတဲ့အချိန်ကို စစ်ဖို့ပါ

#### Snapped state

သူကတော့ element တစ်ခုက အစွန်တစ်ဘက်ဘက်ကိုဝင်သွားရင် ဆိုလိုတာက hidden ဖြစ်သွားတဲ့ အခြေနေကို စစ်ဖို့ပါ

#### Scrollable state

သူကတော့ element သည် scrollable ဖြစ်နေလား မဖြစ်နေသလား ဆိုလိုတာက overflow:scroll ဖြစ်နေတဲ့အခြေနေဟုတ်မဟုတ်ကို စစ်ဖို့ဖြစ်ပါတယ်

scroll driven animations နဲ့ scroll state queries တွေကိုသုံးပြီး ဖန်တီးတဲ့ animations တွေနဲ့က ကွာခြားမှုရှိပါတယ်၊ အဓိကက timing နဲ့ context ကွာပါလိမ့်မယ်၊ scroll state queries တွေက scroll driven animations တွေထက်ပိုပြီးတော့ control လုပ်ခွင့်ပေးနိုင်တဲ့သဘောရှိပါတယ်

အောက်မှာ နမူနာကြည့်လို့ရပါတယ်

{% embed url="<https://developer.chrome.com/static/blog/css-scroll-state-queries/scroll-trigger-vs-scroll-driven.mp4>" %}
(left) scroll-state() triggered animation, (right) scroll-driven animation
{% endembed %}

Scroll-state query ဘယ်လိုရေးရသလဲ

Scroll-state query ဆိုတာ ပြောရရင် container query တစ်ခုထပ်တိုးတဲ့သဘောပဲ container type ထဲမှာ နောက်တစ်မျိုးတိုးလာတာပေါ့

```css
.stuck-top {
  container-type: scroll-state; /* container ကို scroll-state အမျိုးစားသတ်မှတ်မယ် */
  position: sticky;
  top: 0px;

  > nav {
    /* query အမျိုးအစားပေါ်မူတည်ပြီး style တွေပြောင်းမယ် */
    @container scroll-state(stuck: top) {
      background: Highlight;
      color: HighlightText;
    }
  }
}
```

ပိုကောင်းတာကတော့ browser တိုင်းမှာ မရသေးတာဖြစ်လို့ @support နဲ့စစ်ပေးထားသင့်တယ်

```css
.stuck-top {
  container-type: scroll-state;
  position: sticky;
  top: 0px;

  @supports (container-type: scroll-state) {
    > nav {
      @container scroll-state(stuck: top) {
        background: Highlight;
        color: HighlightText;
      }
    }
  }
}
```

### Use Cases <a href="#use_cases" id="use_cases"></a>

**Add a shadow when stuck**

{% embed url="<https://developer.chrome.com/static/blog/css-scroll-state-queries/stuck-navbar.mp4>" %}

```css
.stuck-top {
  container-type: scroll-state;
  position: sticky;
  top: 0px;

  > nav {
    transition: box-shadow .3s ease;

    @container scroll-state(stuck: top) {
      box-shadow: var(--shadow-5);
    }
  }
}
```

**Activate the current stuck header**

{% embed url="<https://developer.chrome.com/static/blog/css-scroll-state-queries/stuck-header.mp4>" %}

```css
.sticky-slide {
  dt {
    container-type: scroll-state;
    position: sticky;
    inset-block-start: 0;
    inset-inline: 0;

    > header {
      transition: 
        background .3s ease,
        box-shadow .5s ease;

      @container scroll-state(stuck: top) {
        background: hsl(265 100% 27%);
        box-shadow: 0 5px 5px #0003;
      }
    }
  }
}
```

**Visually boost the snapped item**

{% embed url="<https://developer.chrome.com/static/blog/css-scroll-state-queries/snapped-testimonials.mp4>" %}

```css
.demo {
  overflow: auto hidden;
  scroll-snap-type: x mandatory;

  > article {
    container-type: scroll-state;
    scroll-snap-align: center;

    @supports (container-type: scroll-state) {
      > * {
        transition: opacity .5s ease;

        @container not scroll-state(snapped: x) {
          opacity: .25;
        }
      }
    }
  }
}
```

**Show the caption for the snapped item**

{% embed url="<https://developer.chrome.com/static/blog/css-scroll-state-queries/snapped-caption.mp4>" %}

```css
.demo {
  overflow-x: auto;
  scroll-behavior-x: contain;
  scroll-snap-type: x mandatory;

  > .card {
    container-type: scroll-state;
    scroll-snap-align: center;

    @supports (container-type: scroll-state) {
      @media (prefers-reduced-motion: no-preference) {
        figcaption {
          transform: translateY(100%);

          @container scroll-state(snapped: x) {
            transform: translateY(0);
          }
        }
      }
    }
  }
}
```

**Animating in slide elements**

{% embed url="<https://developer.chrome.com/static/blog/css-scroll-state-queries/snapped-slides.mp4>" %}

```css
html {
  scroll-snap-type: y mandatory;
}

section {
  container-type: scroll-state;
  scroll-snap-align: start;
  scroll-snap-stop: always;

  @supports (container-type: scroll-state) {
    @media (prefers-reduced-motion: no-preference) {
      > h1 {
        transition: opacity .5s ease, transform .5s var(--ease-spring-3);
        transition-delay: .5s;
        opacity: 0;
        transform: scale(1.25);

        @container scroll-state(snapped: block) {
          opacity: 1;
          transform: scale(1);
        }
      }
    }
  }
}
```

**Indicate scroll with shadow**

{% embed url="<https://developer.chrome.com/static/blog/css-scroll-state-queries/scroll-state-shadows.mp4>" %}

```css
.scroll-container {
  container-type: scroll-state size;
  overflow: auto;

  &::after {
    content: " ";

    background: var(--_shadow-top), var(--_shadow-bottom);
    transition: 
      --_scroll-shadow-color-1-opacity .5s ease,
      --_scroll-shadow-color-2-opacity .5s ease;

    @container scroll-state(scrollable: top) {
      --_scroll-shadow-color-1-opacity: var(--_shadow-color-opacity, 25%);
    }

    @container scroll-state(scrollable: bottom) {
      --_scroll-shadow-color-2-opacity: var(--_shadow-color-opacity, 25%);
    }
  }
}
```

#### Arrow prompt

{% embed url="<https://developer.chrome.com/static/blog/css-scroll-state-queries/scroll-state-arrow-down.mp4>" %}

```css
@container scroll-state((scrollable: top) or (not (scrollable: bottom))) {
  translate: 0 calc(100% + 10px);
}

@container scroll-state((scrollable: top) and (not (scrollable: bottom))) {
  translate: 0 calc(100% + 10px);
  rotate: .5turn;
}
```

#### Return to top

{% embed url="<https://developer.chrome.com/static/blog/css-scroll-state-queries/scroll-state-arrow-up.mp4>" %}

```css
@container not scroll-state(scrollable: top) {
  translate: 0 calc(100% + 10px);
}
```

Reference:<https://developer.chrome.com/blog/css-scroll-state-queries>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://channyeintun.gitbook.io/blogs/css/css-scroll-state.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.