fix scroll bar when folding list

DIYgod · Mar 12, 2018 · ed18fa7 · ed18fa7
1 parent b5e8cd0
commit ed18fa7
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 17 deletions.
diff --git a/README.md b/README.md
@@ -17,7 +17,7 @@
 
 ![image](https://i.imgur.com/JDrJXCr.png)
 
-APlayer is a lovely HTML5 music player to help people build audio easily.
+APlayer is a lovely HTML5 music player.
 
 **APlayer supports:**
 

diff --git a/demo/demo.js b/demo/demo.js
@@ -106,7 +106,8 @@ const ap5 = new APlayer({
     lrc: 3,
     mutex: true,
     theme: '#ad7a86',
-    listFolded: true,
+    listFolded: false,
+    listMaxHeight: '80px',
     audio: [{
         name: '光るなら',
         artist: 'Goose house',

diff --git a/src/css/index.scss b/src/css/index.scss
@@ -431,29 +431,34 @@ $aplayer-height-lrc: $aplayer-height + $lrc-height - 6;
         transition: all 0.5s ease;
         will-change: height;
         display: none;
+        overflow: hidden;
 
         &.aplayer-list-hide {
             height: 0 !important;
         }
 
-        &::-webkit-scrollbar{
-            width: 5px;
-        }
-        &::-webkit-scrollbar-track{
-            background-color: #f9f9f9;
-        }
-        &::-webkit-scrollbar-thumb{
-            border-radius: 3px;
-            background-color: #eee;
-        }
-        &::-webkit-scrollbar-thumb:hover{
-            background-color: #ccc;
-        }
-
         ol {
             list-style-type: none;
             margin: 0;
             padding: 0;
+            overflow-y: auto;
+
+            &::-webkit-scrollbar {
+                width: 5px;
+            }
+
+            &::-webkit-scrollbar-track {
+                background-color: #f9f9f9;
+            }
+
+            &::-webkit-scrollbar-thumb {
+                border-radius: 3px;
+                background-color: #eee;
+            }
+
+            &::-webkit-scrollbar-thumb:hover {
+                background-color: #ccc;
+            }
 
             li {
                 position: relative;

diff --git a/src/js/controller.js b/src/js/controller.js
@@ -154,6 +154,7 @@ class Controller {
 
     initMenuButton () {
         this.player.template.list.style.height = 33 * this.player.options.audio.length - 1 + 'px';
+        this.player.template.listOl.style.height = 33 * this.player.options.audio.length - 1 + 'px';
         this.player.template.menu.addEventListener('click', () => {
             if (!this.player.template.list.classList.contains('aplayer-list-hide')) {
                 this.player.template.list.classList.add('aplayer-list-hide');

diff --git a/src/js/player.js b/src/js/player.js
@@ -411,6 +411,7 @@ class APlayer {
         }
         const songListLength = this.container.querySelectorAll('.aplayer-list li').length;
         this.template.list.style.height = songListLength * 33 - 1 + 'px';
+        this.template.listOl.style.height = songListLength * 33 - 1 + 'px';
 
         this.randomOrder = utils.randomOrder(this.options.audio.length);
     }
@@ -445,6 +446,7 @@ class APlayer {
                 this.container.classList.remove('aplayer-withlist');
             }
             this.template.list.style.height = parseInt(this.template.list.style.height, 10) - 33 + 'px';
+            this.template.listOl.style.height = parseInt(this.template.listOl.style.height, 10) - 33 + 'px';
         }
     }
 

diff --git a/src/template/player.art b/src/template/player.art
@@ -49,7 +49,7 @@
     </div>
 </div>
 <div class="aplayer-list{{ if options.listFolded }} aplayer-list-hide{{ /if }}"{{ if options.listMaxHeight }} style="max-height: {{ options.listMaxHeight }}"{{ /if }}>
-    <ol>
+    <ol{{ if options.listMaxHeight }} style="max-height: {{ options.listMaxHeight }}"{{ /if }}>
         {{each options.audio}}
         <li>
             <span class="aplayer-list-cur" style="background: {{ $value.theme || options.theme }};"></span>