オーディオ用のプレイリストをスクロールするには

Question

再生リストをスクロール可能にしようとしていますが、成功していません。私はどんな方向にも感謝します。私は動的に.mp3ファイルをファイルから読み込み、div内にmp3名を表示しています。 6つ以上のファイルを追加すると、divエリアが増加してmp3の名前が表示されますが、コントロールの範囲を越えて拡張されます。可能であれば、6つの名前の後にリストをスクロール可能にしたい。ここに私のコードは次のとおりです。

HTML：

... 
<!-- Create out audio controls --> 
<audio id="audio" preload="auto" controls="controls" type="audio/mpeg" ontimeupdate="displayTime(this)"> 
<source src="data/song1.mp3">song1.mp3" type="audio/mpeg" > 
Unsupported audio format! 
</audio> 

<!--Audio in our Playlist--> 
<div id="Playlist"> 
<ul class="playlist"> 
<?php $files = scandir("data/"); ?> 
<?php foreach ($files as $file) 
if ($file != '.' && $file != '..') 
    echo "<li audiourl=\"data/$file\"></li>"; ?> 

</ul> 
</div> 
... 

CSS：

... 

.playlist 
{ 
position: relative; 
background:#666; 
top: 295px; 
left: 730px; 
width:500px; 
padding:15px; 

} 


#Playlist ul.playlist 
{ 
position: relative; 
overflow: auto; 

} 
... 

JS：

... 
var playList = document.getElementsByClassName('Playlist'); 
playList.scrollTop = 400; 
... 

Answer 1

私の答えは、より多くのPHPベースのですが、：

<div class="carousel-inner"> 
    <?php 
     $chunky = array_chunk ($files , 6); 
     foreach ($chunky as $array) { 
      echo '<div class="item"><ul>'; 
       foreach ($array as $name){ 
        echo '<li>' . $name . '</li>'; 
       } 
      echo '</ul></div>'; 
     } 
    ?> 
</div> 

array_chunk($files, 6)を使用してファイルを6つのグループに分割し、上記のような処理をブートストラップカルーセルのマークアップに出力できますか？ （https://getbootstrap.com/examples/carousel/）。

編集：ここでのコード例https://eval.in/692526