Help us understand the problem. What is going on with this article?

かんたんSmoothScroll

はじめに

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

CSSで指定

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

example.css
html {
  scroll-behavior: smooth;
}

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

そこにぴったりの便利パッケージ

https://github.com/wessberg/scroll-behavior-polyfill

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ソフトのほうしか頭に浮かびませんでした。。

4年前のデモのサンプル。
https://github.com/GoogleChromeLabs/houdini-samples

Houdini Task Force?
https://github.com/w3c/css-houdini-drafts/wiki

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

追記

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

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away