最近知った驚愕の事実についてお話しします。
ウェブサイトで「目次」の項目をクリックするとページ内の該当箇所に移動しますよね。
また「画面トップへ」というようなボタンを押すと、その画面の一番上に戻ることができます。
その時に目的の場所へ瞬時に移動するのではなく、指でスクロールさせたかのようにスルスルスルっとページが動いて到着する、というのを見たことがありませんか？
私は今まで特に気にしたこともなかったのですが、言われてみればそんなサイトもあるなということに思いいたります。
どうして気にしたことがなかったのかと言うと、画面がスクロールしていって目的の場所に遷移するのは不自然なことではなく、それがあたりまえだと感じていたからです。
何も違和感を持たなかったのです。
瞬時に移動が完了する動きの速いサイトもあれば、少し時間のかかる場合もあるのだろうくらいにしか私の脳には引っかかってこなかったのです。
ところが最近知りました。
あのスクロールが実は見せかけだということを。
あたかもなめらかに画面が動いているような演出に私は騙されていたのだということを。
本当は瞬時に目的の画面を表示できるのに、あえて時間を費やしてスクロールする様子を読者に見せているのです。
なんと素晴らしいアイディアでしょう。
これは恐れ入ったね。
よくもそんなことを考える人がいるものですね。
「表示速度は1ミリ秒でも速い方が正義」と考えるのが普通だと思うのですが（私だけ？）、速さと滑らかなスクロールのもたらす効果とを量りにかけて後者を選んだわけです。
ではどういう理由でこのような「なめらかスクロール」を表示するのでしょうか？
それは一瞬にして画面が別の場所に移ってしまうとユーザーが戸惑ってしまうという懸念があるからだそうです。
「あれ？ 一体ここはどこだ？」
「私はだれ？」
と不思議の国に迷い込んだように目をパチクリさせてしまう人もいるようです。
また私のように、スルスルと画面が動く様を眺めるのが気持ちいいと感じる人もいるかもしれません。
そんなわけでなめらかスクロール技術が使われているのです。
中にはスクロールの速度が変化するものもあります。
目的地で停止する時に急ブレーキで止まらずにやんわりと止まるものも目にします。
まるでカジノのルーレットが少しずつ回転速度を落としていき、やがて重力の法則に身をゆだねて着地するかのような優雅なランディング。
JavaScript という言語とそれを操るプログラマーの技術がタッグを組めば、そんな魔法のような効果を作り出せるのです。
「オレもやってみたい！」
「なめらかスクロール」を実現するためにはいくつかの方法があるようです。
プログラミング学習初心者の私は、CSSの "scroll-behavior" プロパティを使えば簡単にできるという情報を入手しました。
そこでさっそくこのブログ（はてな）で試してみました。
しかしどうしたことでしょう？
何をどうやってもなめらかにスクロールしてくれません。
老眼の目を凝らしてスペルミスを探したり、1行で書いたコードを3行に分けてみたり。
ブラウザによっては対応していないものもあるということなので、クロームとエッジと Safari で試してみましたが結果は同じでした。
「さては、はてな様の提供する高性能なプラットフォームには、かようないかがわしい小細工をカットするスペシャル機能が備わっているに違いない」
そう考えた私は Visual Studio Code で簡単なテストページを作って実行してもみました。
でもやっぱり動きませんね。
途方に暮れて日も暮れて、パソコンに悪態をつき、キーボードに罵声を浴びせた挙句、このブログに泣き言を綴っています。
まだまだ勉強が足りませんね。
でもコーディングって楽しいな！
