読者です 読者をやめる 読者になる 読者になる

eps_r

不思議の謎を解かねばならぬ

スムーススクロールのWebサイト独自実装をやめろ

これはすごく説明しづらいんですが、ブラウザのホイール回転を勝手にスムーススクロールに置き換えてしまうWebサイトを時折見かけます。はっきりいって右クリック禁止並にダサくてユーザー体験を毀損していて友達に噂とかされると恥ずかしいサイトだと思っているんですが、不満に思う人が少ないのか、あるいは地味で説明しづらい事象なのをいいことに実装しているやからがいい気になっているのか、一向に消滅してくれません。

自衛策

いやだ、いやだと言っていても仕方ないので、ごく簡単なUserScriptをChrome版Tampermonkey向けに書きました。

gist.github.com

環境によってはrawがインストールのリンクになります。

動作としては、なるべく早い段階でwindow.addEventListenerを上書きしてイベントを選り分けているだけです。わたしの環境では現時点でコルクのブログで良好に、マンガ図書館Zでまれに失敗する程度の動作をします。これで対応できなかったり不具合の出る例も大量にあるでしょうから、もっといい拡張や参考資料があったら教えてください。

もっといい拡張や参考資料があったら教えてください。(わりと切実なので2回書きました)

余談

ここで言っている独自実装のスムーススクロールとは、特に理由もなくユーザー標準のマウスホイールの動作を殺害し、手前勝手なスクロールの量と速度を押し付ける仕組みのことです。

以下は批判の対象外だと思っています。

  • いわゆるスライダーやカルーセルのような部品単位の操作
  • ページ内リンクでの移動を補間する効果*1
  • fullPage.jsのようなリッチコンテンツ様

今回はこれらの是非は問いません。

勝手なスムーススクロール実装を嫌う理由は上の「手前勝手なスクロールの量と速度を押し付ける」でほとんど説明がつきます。わたしはWindowsChromeのスムーススクロールをオフにしていますが、にも関わらず、無神経なWeb制作者たちはSmoothScroll for websitesのようなプラグインを使ってわざわざ遅いスクロールを強要するわけです。クライアントから「Macみたいになるようにしてよ」とでも言われているのか。

というかスムーススクロール自体を嫌っているわけではありません。この手のスクロールはPageUp/PageDownを置き換えているものも多くありますが、単発で大きく動くこれらのキーとの相性は悪くないと思えるし、あるいはブラウザ/OSなどで操作が一貫していればいいでしょう。私がChromeでオフにしているのは、単にある日突然スムーススクロールの中でもとりわけ出来の悪いものが載って耐えられなかったというだけの話です。

一貫性を欠く、という話でもあります。あるWebサイトではノッチ式(段階的)だったスクロールが、別のWebサイトではヌルヌル動くようになることがあっていいのか? 何のためにユーザーはOSやブラウザの設定でスクロール量と速度を決められるのか? 特に工夫のないホイールの挙動*2なんてものを決めるのはWebサイト制作者ではなくユーザーの方です。つまり、ユーザーのスムーススクロールをノッチスクロールに変えるWebサイトがもし存在すれば、これも同等にクソです。

W3Cアクセシビリティガイドラインでも言われているでしょう。

ガイドライン 3.2 予測可能: ウェブページの表示や挙動を予測可能にすること。

Web Content Accessibility Guidelines (WCAG) 2.0

いや、これは強引でした。

アクセシビリティガイドラインで言っているのは文書構成や入力フォームが主ですので違いますが、まあ考え方は似たようなものです。マウスはユーザーにとってキーボードと並んで主要な入力機器であり、その動作はなるべく予測可能とするのが望ましいでしょう。右クリックやステータスバーを阻害しないことが世間の常識になっていったように、ホイール回転のフックもある程度慎重に扱うべきだと個人的には思っています。ここでダサいということにしておかないとVAP公式サイトにおける右クリック禁止のようにいつまでもバカが変な所で残し続けるかもしれませんし。

大上段からまとめると、勝手スムーススクロールからは「世間の皆が同じマシンを使っていないと分かった上でなお同じ使用感を強要する」というエゴイズムを感じますから、今どきそんなことやめてほしいなあ、という話です。そのように思った発端であり、記事とUserScriptを書く原動力になったコルクのブログコードを紹介して今回は終わりです。

if (navigator.userAgent.indexOf('Mac OS X') == -1) {
    (function() {

        /* ********** 中略 スムーススクロール実現部分など ********** */

        function T(e, t, n) {
            window.addEventListener(e, t, n || false)
        }

        /* ********** 中略 removeEeventListenerなど ********** */

        var P = /chrome/i.test(window.navigator.userAgent);
        var H = "onmousewheel"in document;
        if (H && P) {
            T("mousedown", b);
            T("mousewheel", g);
            T("load", h)
        }
    })();
}

Mac以外のChromeを狙い撃ち。さすがに余計なお世話だと思いませんか。

*1:どこに飛ぶか分かりやすくなるので、ページ内リンクに適用する分には悪くないように思う

*2:勝手スムーススクロールがもたらすのはユーザーの使用感の変化であって、サイトに必要な機能では一切ありません。必要なギミックであればそれは先に述べているように批判の対象外です