【Vivaldi】横スクロールの左右の矢印ボタンを非表示にするCSS

カスタムCSS

Vivaldiのアイコン

この記事では、VivaldiブラウザのオリジナルカスタムUI機能を使って、水平スクロールの左右にある矢印ボタンを非表示にするCSSについて書きます。

本記事は、オリジナルカスタムUIが有効になっている前提です。詳しくは、こちらを参考にしてみてください。

Vivaldiの水平スクロール横にある矢印ボタンを非表示にした画像

本記事で紹介するCSSを使うことで、Vivaldiの水平スクロール利用時に表示される左右の矢印ボタンを非表示にできます。

Vivaldiの横スクロールは、バージョン5.1(2022年2月9日公開)から実装された機能です。タブの位置を上、または下にしていて、設定から「横スクロール」を有効にすると、1つ当たりのタブサイズが固定化されて、タブ名を識別しやすくなります。

そんな水平スクロールですが、タブを開きすぎていると、左右に矢印ボタンが表示されます。本来は、クリックでページ切り替え、長押し(または右クリック)で次ページにあるタブを一覧表示してくれる便利な機能です。

Vivaldi5.1で実装された水平スクロール利用時に表示される左右の矢印ボタン

しかし、不要な方もいるかもしれません。そこで、本記事ではカスタムCSS機能を使って非表示にしてみます。自分のPC上だけの変更なので、誰にも迷惑はかけませんし、いつでも元に戻せます。

「横スクロール便利だけど、左右の移動できる矢印ボタンは不要!」という方、ぜひ試してみてください。

本記事は、既にオリジナルカスタムUI機能が有効になっている前提です。まだ有効にしていないという方は、以下の記事を参考にしてみてください。

本記事は、以下の条件に当てはまる方向けです。垂直タブを使っている方や、横スクロールを使っていない方には関係ない話です。

  • タブバーの位置は、上か下
  • タブ表示の「横スクロールを有効にする」にチェックが入っている
  • 言語を「日本語」にしている
Vivaldi設定:タブ タブバーの位置と、タブ表示

CSS

以下のCSSになります。

/*水平スクロール利用時の左右の矢印を非表示*/
.horizontal-scroll-arrow button[title*="左にスクロール"],
.horizontal-scroll-arrow button[title*="右にスクロール"] {
  display: none;
}

上記CSSは、日本語を使っている方向けです。英語などの別言語を使っている場合は、下記CSSを使ってみてください。ただし、詳しく調査していないので、別のボタンが非表示になる可能性があります。

/*水平スクロール利用時の左右の矢印を非表示*/
.button-toolbar.horizontal-scroll-arrow {
    display: none;
}

上記のCSSを、テキストエディター(Visual Studio Codeや、Windows標準でインストールされているメモ帳アプリなど)でファイルに書き込みます。

Visual Studio Codeで「水平スクロール利用時の左右の矢印を非表示」コードを書いた画面

Vivaldiを再起動すると、タブを開きすぎても、左右の矢印ボタンが表示されなくなります。タブ上のマウスホイールによるページ切り替えはこれまで通りできます。

左右のタブページ切り替えボタンが非表示になる

感想

以上、Vivaldiの水平スクロール利用時、大量にタブを開くと表示される左右の矢印ボタンを非表示にするCSSでした。

僕はもっぱら垂直タブユーザーなので、よく分かりません。スッキリさせたい方には使えるのかなーと思います。

Posted by ナポリタン寿司