オーバーフロー時スクロールバー表示させたい

Question

オーバーフロー時スクロールバー表示させたい

動画をリスト表示させるCSSを作っています。
オーバーフロー時にスクロールバー表示させようとしています。

リスト(.test-playlist-videos-component)の高さを345pxにして、
スクロールバーを表示させリスト項目20すべてを表示させたいのですが、
うまくいきません。

発生している問題・エラーメッセージ

リスト項目20個に対してスクロールが10個くらいにしか適用されず、残りの
10項目が非表示となります。

該当のソースコード

HTML
<script src="https://apps.elfsight.com/p/platform.js" defer></script>
<div class="elfsight-app-XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"></div>

CSS
/*ドロップダウン プレイリスト*/
.test-playlist-videos-component {
position: absolute;
width:260px;
height: 345px;
background-color: transparent;
overflow-y:auto;
border: 1px solid #ddd;
padding:3px;
margin:0;
}

/*ドロップダウン スクロールバー*/
.test-playlist-videos-component::-webkit-scrollbar {
width: 15px;
height: 10px;
background:#eee;
}

.test-playlist-videos-component::-webkit-scrollbar-thumb {
 background:#ccc;
}

.test-playlist-videos-component::-webkit-scrollbar-button {
width:5px;
height:7px;
background:#eee;
}

試したこと

以下、試してみました。
・.test-playlist-videos-component(以降、リスト)のheightをautoに変えるとスクロールバー自体が消えます。
・リストのheightを100％に変えるとリスト自体の長さ(高さ)が伸びましたが、表示される項目は10項目から変わらなかったです。
・リストのheightを1500pxに変えるとリスト自体の長さ(高さ)が伸び、20項目すべて表示されました。

補足情報（FW/ツールのバージョンなど）

Elfsightというサービスを使用しており、そのなかでCSSをカスタマイズしています。
CSSの書き方に誤りがあるのかと質問いたしました。
何かその他、確認する項目等ございましたら教えていただけますと幸いです。
どうぞよろしくお願いいたします。

Answer 1

.test-playlist-videos-componentに

overflow: scroll;

を指定してみてください。

Comments

[apricot111]

早速ありがとうございます。

overflow-y:auto;をoverflow: scroll;に変えると10個スクロールで表示されていたのが、5個(height:345pxで表示される、スクロールせず表示される個数)表示になりました。

[Itta]

HTMLのコードの方も質問に追記していただけますか？

[apricot111]

ありがとうございます。HTML追記いたしました。
今朝になり同じ個所を確認したら、スクロールバーをクリックするとすべてを読み込み、
下にバーを移動できるようになりました。

サービスの問題か、CSSの表記に誤りがあるのか自信がなく、そのほか確認する箇所ございましたら
アドバイスいただけますと幸いです。
※CSS問題なさそうでしたらサービス側に確認しようと思います。

[apricot111]

本件、サービス側に質問したところ、そうした仕様とのことでした。
スクロールバーをクリックすると読み込むのでそのあたりで別の解消法、またはそのままに
するか検討しようとおもいます。
そうそうにご返答いただきありがとうございました。

Answer 2

本件、サービス側に質問したところ、そうした仕様とのことでした。
スクロールバーをクリックすると読み込むのでそのあたりで別の解消法、またはそのままに
するか検討しようとおもいます。
ご返答いただきありがとうございました。