オーバーフロー時スクロールバー表示させたい
動画をリスト表示させる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の書き方に誤りがあるのかと質問いたしました。
何かその他、確認する項目等ございましたら教えていただけますと幸いです。
どうぞよろしくお願いいたします。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/11/02 08:07
2020/11/02 08:09
2020/11/04 02:09
2020/11/06 00:08