diff --git a/README.md b/README.md index 66a1480a..ae422fff 100644 --- 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 index a3c9fd81..a869c78d 100644 --- 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 index d5ff1272..85efd5c3 100644 --- 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 index ef87c53f..49ccdb80 100644 --- 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 index f13ad8e8..84ffb88a 100644 --- 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 index 3e8f6c15..1272b21d 100644 --- a/src/template/player.art +++ b/src/template/player.art @@ -49,7 +49,7 @@