スマホ版Webサイト twitterの埋め込み スクロールバーが表示されない

質問タイトルの通り、メディアクエリでスマホ版Webサイトを作成しているのですが、スマホ版だとTwitter埋め込みのスクロールバーが表示されません。
PC版だとTwitter埋め込みのすぐ右にスクロールバーが表示されるのに何故でしょうか。

教えて頂きたくお願い致します。

質問者からの補足コメント

• 回答ありがとうございます。
  
  .scroll{overflow-x:scroll;}
  .scroll::-webkit-scrollbar{height:10px;}/*バーの太さ*/
  .scroll::-webkit-scrollbar-track{background:#dddddd;}/*バーの背景色*/
  .scroll::-webkit-scrollbar-thumb{background:#2cc2e4;}/*バーの色*/
  
  URL:https://www.tsukimi.net/css_scrollbar.html
  
  実際に上記のCSSを試してできたのですが、Twitterの埋め込みに関してはなぜか出来ませんでした。
  Twitterの埋め込みだけやり方違うのでしょうか。
  
  宜しくお願い致します。

  No.1の回答に寄せられた補足コメントです。 補足日時：2020/10/16 10:03

• 回答ありがとうございます。
  
  <div id="id3_top" class="twitter_page">
  <a class="twitter-timeline" data-width="900" data-height="500" href="https://twitter.com/AnimeAnime_jp?ref_src=twsrc% … by AnimeAnime_jp</a>
  <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
  </div>
  
  上記がHTMLになります。
  また、F12キーで原因を調べてみましたがよくわかりませんでした。
  
  宜しくお願い致します。

  No.2の回答に寄せられた補足コメントです。 補足日時：2020/10/19 14:51

No.3 回答者： fujillin 回答日時： 2020/10/19 18:39

No2です。

＞上記がHTMLになります。
＞また、F12キーで原因を調べてみましたがよくわかりませんでした。
ご提示のHTMLはページのソースですよね？
推測するところ、HTMLがスクリプトで書き換えられているので、ソースそのものが表示されているとは思えません。
No2で触れているのは、「実際に表示されているHTML(DOM)」です。

＞また、F12キーで原因を調べてみましたがよくわかりませんでした。
F12キーで、「elements」とか「インスペクター」などのタブを見ると、表示中のHTMLを見ることができます。
それが、実際に表示されているHTMLの構成ですので、それを確認しないと状況がわかりません。
想像するところ、No2で記述したようなことになっているのではないかと思いますので、適切な要素にCSSが当たるようにすれば良いと思われます。

ちゃんと調べるのが面倒なら、少々乱暴ですけれど、div以下の要素全部にCSSが適用されるようにしてしまえば、どれかがあたりになるのではないでしょうか？
まぁ、弊害が出る可能性もなきにしもあらずですが…

＞宜しくお願い致します。
情報が無いので、これ以上の推測は無駄と思います。
（この回答もNo2と同じことしか書いておりません）

No.2 回答者： fujillin 回答日時： 2020/10/16 11:14

No1です

＞実際に上記のCSSを試してできたのですが、Twitterの埋め込みに
＞関してはなぜか出来ませんでした。
HTMLの構成の問題なので、「Twitter」とかは関係ないでしょう。
他の部分では表示できているとのことですので、ベンダープレフィックスの影響ではないと考えても良さそうに思います。
（fxなどでどのように表示されるかは不明ですけれど）

一方で、ご質問の「Twitter」なる部分がどうなっているのか（記載が無いので）まったくわかりませんが、例えば、スクロールバーのCSSを指定した要素の直下に100%のdivなどがあって、その中でoverflowしているようなケースを想定してみれば、外見上は元の（指定した）要素でのoverflowのように見えますが、実際にはその子要素でoverflowをしていることになりますので、CSSは適用されないことになります。
（他にもいろいろなケースが考えられると思います）

簡単に確認してみる方法の一つとして、PC用のメジャーブラウザであればF12キーで「表示中のHTML」の構成を見ることが可能ですので、実際の表示がどのようになっているかを見てみることで、原因を確かめることができると思います。
もしも、元の表示が、レスポンシブなどでCSSを切り替えているような場合には、問題となっているCSSが適用される状態にしておいてから確認する必要がありますのでご注意を。

No.1 回答者： fujillin 回答日時： 2020/10/15 16:06

こんにちは

ちゃんと確認はしていませんが、スマホの場合はスワイプなどの操作でスクロールするＵＩになっているので、通常状態だとバーは表示されないのでは？
私のスマホの場合は、スクロールする際に（画面にタップした状態で）小さなスクロールバーが表示されるようになっています。

どうしても常時表示したければ、自作のスクロールバーなどを別途表示するとか・・・