CSSだけでページ内スムーススクロールとスクロール先のテキストをハイライト

Ads

Result


ページ内をスムーススクロールするとそのターゲットとなる箇所が移動後にハイライトする、みたいなの

ハイライトは:targetkeyframesを使い、スクロール後にフラッシュハイライトするようになっています

スクロールはscroll-behavior: smooth;なのでまだ実用的なものではありませんが一つの手段として

css

/*移動時ハイライト*/
.footnote:target {
  animation: yellowflash-outline 2s;
}
.footnotes :target {
  animation: yellowflash-bg 2s;
}
/*ハイライトをフラッシュアニメーションにする*/
@keyframes yellowflash-bg {
  from {
    background: yellow;
  }
  to {
    background: transparent;
  }
}
@keyframes yellowflash-outline {
  from {
    outline: 10px solid yellow;
  }
  to {
    outline: 10px solid transparent;
  }
}
/*スクロール*/
html {
  scroll-behavior: smooth;
}

can i use

scroll-behaviorのブラウザ対応状況です。今のところはさほど実用的とは言えない感じですね

スクロールは高い需要があり、衰える様子も無さそうなのでこのまま他ブラウザも対応してくれると嬉しいですね

via

Footnotes