Google Chrome 61で追加されたscroll-behaviorを考える
UI開発者 泉口9月21日にStable ChannelのGoogle Chromeがバージョン61にアップデートされました。
Webサイト開発において嬉しい機能はwindow.visualViewportによるビューポートの数値取得や、<script type="module">によるJavaScriptモジュールのネイティブサポート、JavaScriptからAndroidネイティブアプリへのURL共有が可能になるWeb Share APIなどがありますが、Chrome 61ではWebアプリケーションからUSBデバイスを直接操作するWebUSB APIが搭載され、外部デバイスの操作までできるとなると、もはやブラウザの範囲を超えた印象を持ちます。
今回はscroll-behaviorに関連する内容をGoogle Developers New in Chrome 61から抜粋し、テストしてみたいと思います。
CSSプロパティscroll-behaviorの実装
scroll-behaviorは目新しい機能ではありません。jQueryを使えばJavaScript初心者でも実装できるただの「スムーズスクロール」ですし、Firefoxでは2015年のバージョン36からサポートされていました。
一言で言えば「スムーズスクロールをJavaScriptで実装する必要がなくなります」ただそれだけのことですが、例えば他のページから遷移した際にスムーズスクロールしなかった、a要素で且つhref=#から始まる要素全てにイベントハンドリングしてページが重くなった、連打するとおかしな挙動をしたなど...気付けば「たかがスムーズスクロールが他の機能との兼ね合いでスパゲッティコードになってしまった」と言った例もよくある話ではないでしょうか。
個人的にこのスムーズスクロールの闇はJavaSciript開発者のほとんどが通る道のような気もしていますが、scroll-behaviorを使うとJavaScriptを一切書く必要なくスムーズスクロールを実装することができます。
もっとも簡単な例はscroll-behavior - CSS | MDNに記載されているExampleです。欲を言えばスクロールの速度を変更したい、アニメーションの挙動を変更したいなどもあるかも知れませんが、HTMLとCSSだけでごく簡単に実装できることがわかります。
また、開いているページだけでなく別のページからアンカーで遷移した際もスムーズスクロールが行われるため、わざわざ遷移時の挙動をJavaScriptで書く必要もなくなりました。
更に:target疑似クラスにも対応しているので、多少無茶はありますが固定ヘッダ＋スムーズスクロールも下記コードだけで実装可能です（Exampleに沿ってscroll-container、scroll-page要素を使用しています）。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
overflow: hidden;
height: 100%;
}
body {
position: relative;
display: flex;
flex-direction: column;
}
.fixed-menu {
position: absolute;
top: 0;
left: 0;
display: flex;
width: 100%;
height: 50px;
list-style: none;
}
.fixed-menu li {
display: flex;
flex: 1 0 0%;
}
.fixed-menu li a {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
scroll-container {
overflow-y: scroll;
width: 100%;
height: calc(100% - 50px);
margin: 50px 0 0;
scroll-behavior: smooth;
}
scroll-page {
display: flex;
height: 100%;
transition: .5s;
}
scroll-page[id="menu1"]:target ~ .fixed-menu a[href="#menu1"],
scroll-page[id="menu2"]:target ~ .fixed-menu a[href="#menu2"],
scroll-page[id="menu3"]:target ~ .fixed-menu a[href="#menu3"] {
background: #ccc;
}
</style>
</head>
<body>
<scroll-container>
<scroll-page id="menu1">メニュー1の内容</scroll-page>
<scroll-page id="menu2">メニュー2の内容</scroll-page>
<scroll-page id="menu3">メニュー3の内容</scroll-page>
<ul class="fixed-menu">
<li><a href="#menu1">menu1</a></li>
<li><a href="#menu2">menu2</a></li>
<li><a href="#menu3">menu3</a></li>
</ul>
</scroll-container>
</body>
</html>
ここまでscroll-behaviorの良い所だけを記載していますが、実際はどうでしょうか？
まずWebサイトに適用するには、Microsoft Edge、Safariなど未対応のブラウザが多く、scroll-behaviorに未対応のブラウザでも実現させたければスムーズスクロールは従来通りJavaScriptで書く必要があります。
更にスマートフォンやタブレットに関してはボタンを操作するよりも指でスクロールした方が早く、ページの最上部に戻る機能はデフォルトで実装されているデバイスもあるため、スムーズスクロールはあまり使わないユーザーも多いのではないでしょうか。
嬉しい機能な反面使い所が難しい印象ではありますが、Chrome拡張で表示するポップアップなど縦横幅の最大/最小表示領域が定められている画面や、Chrome Apps、NW.js、Electronなどのブラウザ依存のないデスクトップアプリケーションではメイン機能の開発に負荷をかけることなくスムーズスクロールが実装できるので、要所要所でscroll-behaviorが活躍する日も来ると考えます。