More than 5 years have passed since last update.

かんたんSmoothScroll

Last updated at 2019-10-03Posted at 2019-10-03

はじめに

久しぶりにHTMLを触った際に、
ボタンなどをクリックしたときのスーとスクロールする動きって、
Javascriptで作らないと（jQueryのライブラリとか使わないと）駄目だっけ・・・と思って検索したのが始まり。

CSSで指定できるようになっている。

example.css

html {
  scroll-behavior: smooth;
}

これだけで同一ページ内リンクを踏めば、スーとスクロールしてくれる。便利。
ただ、一部、サポートしていないブラウザで動作しない。

Readmeにある通りですが、インストールして以下のコードを加えれば動きます。
（typescriptだからどうかなと思いましたがとりあえず動きました）

if (!("scrollBehavior" in document.documentElement.style)) {
    import("scroll-behavior-polyfill");
}

ただ、一つ欠点があり、このパッケージはスタイルシートに対応していないので、HTMLに直接書くなりが必要です。

Reactで作ってたので、tsxに書こうかと思ったところ、もちろん定義にないものなので怒られて、土台になってるHTMLの方に直接書きました。

<html lang="ja" style="scroll-behavior: smooth">

ちょっとかっこ悪い

作者の方が対応していない理由として貼られているリンク先で、
どういう仕組に対して拡張しないといけなくなり大変だよみたいなことが書かれており、全くしらない部分だったので勉強になりました。

で、興味が惹かれたのがHoudini。
実はこちらが本題でメモとして残そうと思った次第。

最初、3Dソフトのほうしか頭に浮かびませんでした。。

仕様自体はドラフトみたいですが、ものになったらちょっとおもしろそうですね。
一部はChromeに実装されてるようなので、今度触ってみたいと思います。

ちゃんとした内容解説。サンプルもあって、内容後で読みたい。
https://www.kabuku.co.jp/developers/a-small-taste-of-css-houdini