横方向のスクロールバーが不格好に感じる

[Yarakashi-Kikohshi]

※ この問題は私個人の主観が大きく、緊急性の高い問題ではありません。

横方向のスクロールバーが少し不格好だなと感じることが多々あります。現状はブラウザのデフォルト CSS が当たっているようですが、もう少し格好良いスタイルになっていると良いなぁと思います。特に長いコードブロックでこの問題を強く感じます。

コードサンプル

### Long code block
```
Long long long long long long long long long long long long long long long long long long long long long code block
```



### Very long table

Very|vary|very|very|long|long|long|long
:--:|:--:|:--:|:--:|:--:|:--:|:--:|:--:
table|table|table|table|table|table|table|table

この他にも、以下の部分で横方向のスクロールバーを見つけることが出来ました。これもあまり全体的なデザインの雰囲気と合致せず格好良いとは思えません。

https://qiita.com/Qiita

一方で、以下に示すホームの部分には横方向のスクロールバーはありませんでした。:thinking:

https://qiita.com/

[munierujp]

確かMacはデフォルトではスクロール時のみ表示され、しかもそのデザインも細めです。
もし、エンジニアやデザイナーがみなMacユーザーでWindowsでの表示確認していなければ、そもそもこのような表示になっていることに気づいていない可能性もありそうです。

[tanaka-asami415]

@Yarakashi-Kikohshi
ありがとうございます🙏
記事中に関しては実装の都合上、現在の状態になっているのですが
他の修正できそうなところは修正していきます！

[Yarakashi-Kikohshi]

#405 の解答を受けて気付いたのですが、Chrome flags を利用することでこの問題をユーザー側から応急的に解消できる可能性があります。（Qiita 側から解消されることを願いますが、ユーザーから解消するアプローチの 1 案です）

これは実験的な機能のため有効化にはユーザーの判断に任せられますが、以下の設定を Enable に変更し再起動することで、スクロールバーをイイ感じに変更できます。

chrome://flags/#overlay-scrollbars

• Overlay Scrollbars

  Enable the experimental overlay scrollbars implementation. You must also enable threaded compositing to have the scrollbars animate. – Windows, Linux, ChromeOS, Fuchsia, Lacros

[tanaka-asami415]

@Yarakashi-Kikohshi
ご報告ありがとうございます！
実験的な機能とはいえ、一時的な解消方法が見つかってよかったです！🙇

[Yarakashi-Kikohshi]

追記です。

本 Discussion では Chrome のデフォルト CSS によるスクロールバーが不格好だという内容でしたが、Chromium の MS Edge でスクロールバーの CSS に変更があったようです。

バージョン 112.0.1722.34 (公式ビルド) (64 ビット)

それまで四角のスクロールバーでしたが、丸みの帯びたスクロールバーに変更されました。これは Chrome では確認されません。

Chrome では前回のコメントと同様に flags によるスクロールバーの変更が必要です。

[tanaka-asami415]

@Yarakashi-Kikohshi
そうなんですね…!!👀
追記をいただきありがとうございます！

[Yarakashi-Kikohshi]

追記です。

暫定的に Chrome flags の Overlay Scrollbars を有効にすることで、この問題に対応していましたが、Chrome が 115 に更新されたことに伴って、Overlay Scrollbars は削除されました。

このため、Chrme では元の不格好な状態が再現される形になりました 😢

ChromeOSバージョン114→115にて追加/削除されたchrome://flags - Qiita

[tanaka-asami415]

@Yarakashi-Kikohshi
なんと…😢共有いただきありがとうございます。

ご報告ができていなかったのですが、エディタページの縦のスクロールバーに関しては下記のリリース時に対応済みです。
ご報告が漏れており、大変失礼いたしました🙇
https://qiita.com/release-notes/2023-04-18

時期は確約できないのですが、他の箇所に関しても検討を進めております💪✨

[Yarakashi-Kikohshi]

リリースノートを確認しておらず、エディタページ内のスクロールバーの対応について知りませんでした。ありがとうございます 🎉

他の箇所への検討対応もぜひぜひよろしくお願いします。

[tanaka-asami415]

@Yarakashi-Kikohshi
Windowsから閲覧した際の下記の横スクロールバーの表示を修正しました！✨

• 記事内のcode block・Table
• Headerのグローバルナビゲーション
• マイページのタブ

他の場所も順次対応予定ですので、お待ちいただけますと幸いです！🙏

[Yarakashi-Kikohshi]

当該箇所でスクロールバーの表示が修正されていることを実際に確認しました！👀
ありがとうございます 🎉

[tanaka-asami415]

@Yarakashi-Kikohshi
お待たせいたしました！
Windowsから閲覧した際のスクロールバーの表示の修正が全て完了しました！✨

対応箇所が多いため画像等は割愛させていただきますが、もし修正漏れを見つけた際は教えていただけるとありがたいです🙏

[Yarakashi-Kikohshi]

ご対応ありがとうございます！ 🎊

もしも修正されていない箇所があれば、随時報告させていただきます。