scroll-state()

source：https://developer.chrome.com/blog/css-scroll-state-queries

目標：Pure CSS，隨著捲動的變化，動態調整樣式

WARNING

Chrome 133 以上支援

Stuck Demo

卡住狀態：當元素卡在邊緣時，觸發樣式變更。

Nav

<template>
  <div class="demo-container">
    <div class="demo-content">
      <div class="stuck-top">
        <nav>Nav</nav>
      </div>
    </div>
  </div>
</template>

<style scoped>
@import 'https://unpkg.com/open-props' layer(design.system);

.demo-container {
  height: 300px;
  overflow-y: auto;
  .demo-content {
    height: 1200px;
    padding-top: 300px;
    background: LightGray;
  }
}
.stuck-top {
  container-type: scroll-state;
  position: sticky;
  top: 0px;

  @supports (container-type: scroll-state) {
    > nav {
      transition: box-shadow 0.3s ease;
      @container scroll-state(stuck: top) {
        background: #fff;
        color: red;
        box-shadow: var(--shadow-5);
      }
    }
  }
}
</style>

Snapped Demo

固定狀態：當元素在軸線上對齊時，觸發樣式變更。

TODO：研究 SnappedDemo 的 CSS 語法

Introducing

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Et consequuntur dolor similique.

container-type: scroll-state

Et consequuntur dolor similique, ab reiciendis rerum distinctio! Impedit dolorem autem quidem, laborum laudantium aut magnam magni dolores velit eos nulla assumenda.

@container scroll-state(snapped: inline)

Lorem ipsum, dolor sit amet consectetur adipisicing elit, laborum laudantium aut magnam magni dolores velit eos nulla assumenda.

Opacity transitions to 1 when snapped

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Achieved via a state container query

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.