すべてのページで標準のスクロールバーを表示する

2021/02/262021/02/27

はじめに

様々なウェブページがあります。この頃、モバイル対応やレスポンシブ対応の結果、デスクトップ環境のサイトでもスクロールバーを非表示にするサイトが出始めました。

モバイル環境であれば、スクロールバーを非表示にして表示領域を確保するのは良い方法です。ですが、デスクトップ環境では慣れ親しんだGUIとかけ離れた表示をする異質なサイトになってしまいます。どのような意思決定のもとにこのようなサイトが出来上がったのか不思議でなりませんが、存在するものはどうしようもありません。しかたがないので、ユーザ側で対応します。

具体的には、ブラウザの拡張機能のユーザスタイル・ユーザスクリプトで対応します。

ユーザスタイル

default-scrollbar.user.css/*! default-scrollbar.user.css */
/* ==UserStyle==
@name         default-scrollbar
@description  Reset scrollbar to default settings.
@author       toshi (https://github.com/k08045kk)
@license      MIT License
@see          https://opensource.org/licenses/MIT
@version      1.0.0
@note         1.0.0 - 20210226 - 初版
@see          https://www.bugbugnow.net/2021/02/default-scrollbar.html
@preprocessor default
==/UserStyle== */

html {
  overflow-y: auto !important;
  scrollbar-color: auto !important;
  scrollbar-width: auto !important;
}
body {
  overflow-y: visible !important;
}

※上記のコードをすべてのページに適用する。

概要

ページの<html>にスクロールバーを表示します。また、<body>のスクロールバーなしにします。それ以外のスクロールバーに関しては、変更しません。これにより、ページのトップレベルのスクロールバーのみ表示可能であれば表示します。

ユーザスクリプト

default-scrollbar.user.js// ==UserScript==
// @name        default-scrollbar
// @description Reset all scrollbars to default settings.
// @match       *://*/*
// @author      toshi (https://github.com/k08045kk)
// @license     MIT License
// @see         https://opensource.org/licenses/MIT
// @version     0.1
// @note        0.1 - 20210226 - 初版
// @see         https://www.bugbugnow.net/2021/02/default-scrollbar.html
// @grant       none
// ==/UserScript==

(function() {
  // add default-scrollbar.user.css
  var style = document.createElement('style');
  style.textContent = 'html { overflow-y: auto !important; scrollbar-color: auto !important; scrollbar-width: auto !important; } body { overflow-y: visible !important; } ';
  document.documentElement.appendChild(style);

  // delete webkit-scrollbar
  window.addEventListener('load', function() {
    for (var s=document.styleSheets.length; s--; ) {
      var sheet = document.styleSheets[s];
      for (var i=sheet.rules.length; i--; ) {
        var text = sheet.rules[i].selectorText;
        if (text && text.indexOf('::-webkit-scrollbar') >= 0) {
          sheet.deleteRule(i);
        }
      }
    }
  });
})();

解説

WebKit系（Safari、Chrome、Edge、etc）のブラウザにはスクロールバー用の疑似セレクターが準備されています。この疑似セレクターを使用することでスクロールバーを自由に変更することができます。

問題は、この疑似セレクターが自由すぎることです。CSSだけでは元に戻すことができません。そのため、疑似セレクターが使用されていると思しきセレクターをJavaScriptで全削除することで対応しています。

ただし、問題があります。すべてのスクロールバーを対象にしています。例えば、特定のスクロールバー（主に横スクロールバー）のみを非表示にしていることがあります。その場合、意図した表示ではなくなってしまいます。そのため、ユーザスクリプトに関しては、すべてのスクロールバーを標準に戻す機能だと考えてください。

※::-webkit-scrollbar - CSS: Cascading Style Sheets | MDN

備考

特定のドメインを除外する

stylusは、ユーザスタイルを特定のドメインのみ除外することができます。

設定方法は、目的のページを開いてブラウザアクションボタンをクリックします。今回のユーザスタイルであるdefault-scrollbar.user.cssが表示されるはずです。右端の「︙」ボタンをクリックすると「現在のドメインを除外」の項目が現れるため、チェックすれば特定ドメインのみ除外できます。

スモーススクロールを無効化する

default-scroll-behavior.user.css/*! default-scroll-behavior.user.css */
/* ==UserStyle==
@name         default-scroll-behavior
@description  Reset scroll behavior to default settings.
              Disable smoth scrolling.
@author       toshi (https://github.com/k08045kk)
@license      unlicense
@version      1.0.0
@note         1.0.0 - 20210227 - 初版
@see          https://www.bugbugnow.net/2021/02/default-scrollbar.html
@preprocessor default
==/UserStyle== */

html {
  scroll-behavior: auto !important;
}

バグ取りの日々