くまだどうも、くまだです。
CSSのscroll-state()について。
scroll-state()
scroll-state()はコンテナクエリーの一つです。コンテナ要素のスクロールに応じてスタイルを変更することができます。例えばスクロールされたらヘッダーの背景色が変わる、という感じです。
例えば以下のようなコードになります。
<div class="container">
<div class="container__scroll">
<header class="header"></header>
</div>
<div class="contents">
<p>↓スクロール</p>
<p>↓</p>
<p>↓</p>
<p>↓</p>
<p>↓</p>
</div>
</div>
.container__scroll {
position: sticky;
top: 0;
container-type: scroll-state;
}
.header{
background-color: orange;
width: 100%;
height: 50px;
}
@container scroll-state(stuck: top) {
.header {
background-color: red;
}
}
.contents {
background-color: skyblue;
height: 2000px;
}
See the Pen scroll-state() by kuma0605 (@kuma0605) on CodePen.
スクロールするとヘッダーの背景色が変わります。
コンテナ要素にはcontainer-type: scroll-state;を指定します。
そして以下の部分でscroll-stateが指定された子要素に対して、コンテナの状態に応じてスタイルを変更します。
@container scroll-state(stuck: top) {
.header {
background-color: red;
}
}
stuckはpostion:sticky;で要素が固定されている状態を表しています。
スクロールして要素がstickyによって固定されたタイミングで、ヘッダーの背景色が変わる、というイメージです。
他のパターンでは、以下のようなコードもあります。
<div class="container">
<div class="box">
<div class="box__block">1</div>
</div>
<div class="box">
<div class="box__block">2</div>
</div>
<div class="box">
<div class="box__block">3</div>
</div>
<div class="box">
<div class="box__block">4</div>
</div>
<div class="box">
<div class="box__block">5</div>
</div>
<div class="box">
<div class="box__block">6</div>
</div>
</div>
.container {
overflow: hidden;
overflow: auto;
scroll-snap-type: both mandatory;
scroll-behavior: smooth;
height: 100vh;
}
.box {
padding-top: 40px;
padding-bottom: 40px;
scroll-snap-align: center;
container-type: scroll-state;
}
.box__block {
background-color: #fff;
height: 80vh;
margin: 0 auto;
border: 1px solid #000;
transition: background-color 0.3s ease;
}
@container scroll-state(snapped: y) {
.box__block {
background-color: red;
}
}See the Pen scroll-state(snapped: y) by kuma0605 (@kuma0605) on CodePen.
scroll-snap-typプロパティを使って、スクロールしたら中のコンテンツをピタッと貼りつくように止まります。
コンテナ要素にはcontainer-type: scroll-state;を指定します。
そして以下の部分(snapped:y)の部分で、scroll-snap-typeプロパティで子要素がピタッと止まったら背景色が変わる、というスタイルにしています。
@container scroll-state(snapped: y) {
.box__block {
background-color: red;
}
}他にもscroll-state(scrollable:~~)というのもあります。
ここまで読んでくださりありがとうございました。