WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： mane
カテゴリー： プログラム >開発環境

こんにちは。
内容量の多いテーブル要素をコーディングする時、横スクロールができることを分かりやすくするScrollHint.js。
公式サイトにはCDNがあるので、そちらから使用するとかなり軽量で簡単に利用でき、使用している方も多いのではないでしょうか。

今回、ノートパソコンサイズから実装することとなり検証を進めていたのですが、Chromeだけでスクロールヒントは表示されるのに、横スクロールバーが表示されない・・・
FirefoxもEdgeも、なんならIEでも問題なく表示されているのに。
デスクトップから確認した時の実際のスクロールバーはこちら↓

今までタブレットサイズ以下の時でしか実装することがなかったので気にも留めていなかったのですが、横スクロールバーが無いとスクロールできないですよね。
最近のノートパソコンはフラットポイントでタブレットの様な扱いができますが、念のため調べてみました。

結論、恐らくChromeのバグかもしれません。
他のスタッフのChromeで確認したところ、正常に表示されていました。
フロントエンド側からできることは見つからなかったのですが、個々のChromeから設定をすれば表示が改善される方法をみつけたのでご紹介いたします。

Chromeを起動

Chromeを起動させたら、アドレスバーに chrome://flags/#overlay-scrollbars と入力してエンターを押します。
すると、下記の様な画面に遷移します。

Overlay Scrollbars の設定を変更

すると、「Overlay Scrollbars」という項目に黄色マーカーがついていると思います。
そちらの項目を「Default」→「Disabled」に変更し、画面下にある青いボタン「Relaunch」をクリックすると自動でChromeを再起動してくれます。

これで設定完了です。
元に戻したらどうなるのかなと思い戻してみたところ、ちゃんと横スクロールバーが表示されました・・・
Chrome側のバグの可能性大ですね・・・
私の検証環境はWindows10、Chrome最新バージョンでした。

Chromeで横スクロールバーが表示されないという事があれば、まずは試してみてください。

参考サイト：Windows10でChromeスクロールバーが表示されなくなる問題を修正