fix(lyrics): hide the scrollbar in lyrics page (#605)

* fix(lyrics): hide the scrollbar in lyrics page

close #571

* fix(tracklist): close context menu when scrolling

* fix: disable scrolling when modal show

src/App.vue

@@ -111,6 +111,7 @@ export default {
   --color-navbar-bg: rgba(255, 255, 255, 0.86);
   --color-primary-bg-for-transparent: rgba(189, 207, 255, 0.28);
   --color-secondary-bg-for-transparent: rgba(209, 209, 214, 0.28);
+  --html-overflow-y: overlay;
 }
 
 [data-theme='dark'] {
@@ -140,7 +141,7 @@ body {
 }
 
 html {
-  overflow-y: overlay;
+  overflow-y: var(--html-overflow-y);
   min-width: 768px;
   overscroll-behavior: none;
 }

src/components/TrackList.vue

@@ -43,6 +43,7 @@
 import { mapActions, mapMutations, mapState } from 'vuex';
 import { addOrRemoveTrackFromPlaylist } from '@/api/playlist';
 import { isAccountLoggedIn } from '@/utils/auth';
+import { disableScrolling, enableScrolling } from '@/utils/ui';
 
 import TrackListItem from '@/components/TrackListItem.vue';
 import ContextMenu from '@/components/ContextMenu.vue';
@@ -122,8 +123,10 @@ export default {
     openMenu(e, track) {
       this.rightClickedTrack = track;
       this.$refs.menu.openMenu(e);
+      disableScrolling();
     },
     closeMenu() {
+      enableScrolling();
       this.rightClickedTrack = {
         id: 0,
         name: '',

src/electron/services.js

@@ -1,8 +1,8 @@
-const express = require("express");
+const express = require('express');
-const bodyParser = require("body-parser");
+const bodyParser = require('body-parser');
-const cache = require("../../netease_api/util/apicache").middleware;
+const cache = require('../../netease_api/util/apicache').middleware;
-const fileUpload = require("express-fileupload");
+const fileUpload = require('express-fileupload');
-import routes from "../../netease_api/routes";
+import routes from '../../netease_api/routes';
 
 export function startNeteaseMusicApi() {
   // Integrate API
@@ -10,23 +10,23 @@ export function startNeteaseMusicApi() {
 
   // CORS & Preflight request
   app.use((req, res, next) => {
-    if (req.path !== "/" && !req.path.includes(".")) {
+    if (req.path !== '/' && !req.path.includes('.')) {
       res.set({
-        "Access-Control-Allow-Credentials": true,
+        'Access-Control-Allow-Credentials': true,
-        "Access-Control-Allow-Origin": req.headers.origin || "*",
+        'Access-Control-Allow-Origin': req.headers.origin || '*',
-        "Access-Control-Allow-Headers": "X-Requested-With,Content-Type",
+        'Access-Control-Allow-Headers': 'X-Requested-With,Content-Type',
-        "Access-Control-Allow-Methods": "PUT,POST,GET,DELETE,OPTIONS",
+        'Access-Control-Allow-Methods': 'PUT,POST,GET,DELETE,OPTIONS',
-        "Content-Type": "application/json; charset=utf-8",
+        'Content-Type': 'application/json; charset=utf-8',
       });
     }
-    req.method === "OPTIONS" ? res.status(204).end() : next();
+    req.method === 'OPTIONS' ? res.status(204).end() : next();
   });
 
   // cookie parser
   app.use((req, res, next) => {
     req.cookies = {};
-    (req.headers.cookie || "").split(/\s*;\s*/).forEach((pair) => {
+    (req.headers.cookie || '').split(/\s*;\s*/).forEach(pair => {
-      let crack = pair.indexOf("=");
+      let crack = pair.indexOf('=');
       if (crack < 1 || crack == pair.length - 1) return;
       req.cookies[
         decodeURIComponent(pair.slice(0, crack)).trim()
@@ -42,17 +42,17 @@ export function startNeteaseMusicApi() {
   app.use(fileUpload());
 
   // cache
-  app.use(cache("2 minutes", (req, res) => res.statusCode === 200));
+  app.use(cache('2 minutes', (req, res) => res.statusCode === 200));
   // router
 
-  Object.keys(routes).forEach((route) => {
+  Object.keys(routes).forEach(route => {
     app.use(route, routes[route]);
   });
 
   const port = process.env.PORT || 10754;
-  const host = process.env.HOST || "127.0.0.1";
+  const host = process.env.HOST || '127.0.0.1';
 
   app.server = app.listen(port, host, () => {
-    console.log(`server running @ http://${host ? host : "localhost"}:${port}`);
+    console.log(`server running @ http://${host ? host : 'localhost'}:${port}`);
   });
 }

src/store/mutations.js

@@ -1,3 +1,5 @@
+import { disableScrolling, enableScrolling } from '@/utils/ui';
+
 export default {
   updateLikedXXX(state, { name, data }) {
     state.liked[name] = data;
@@ -40,6 +42,12 @@ export default {
   },
   updateModal(state, { modalName, key, value }) {
     state.modals[modalName][key] = value;
+    if (key === 'show') {
+      // 100ms的延迟是为等待右键菜单blur之后再disableScrolling
+      value === true
+        ? setTimeout(() => disableScrolling(), 100)
+        : enableScrolling();
+    }
   },
   toggleLyrics(state) {
     state.showLyrics = !state.showLyrics;

src/utils/ui.js

@@ -0,0 +1,7 @@
+export function disableScrolling() {
+  document.documentElement.style.setProperty('--html-overflow-y', 'hidden');
+}
+
+export function enableScrolling() {
+  document.documentElement.style.setProperty('--html-overflow-y', 'overlay');
+}

src/views/lyrics.vue

@@ -189,6 +189,7 @@ import VueSlider from 'vue-slider-component';
 import { formatTrackTime } from '@/utils/common';
 import { getLyric } from '@/api/track';
 import { lyricParser } from '@/utils/lyrics';
+import { disableScrolling, enableScrolling } from '@/utils/ui';
 import ButtonIcon from '@/components/ButtonIcon.vue';
 
 export default {
@@ -286,8 +287,10 @@ export default {
     showLyrics(show) {
       if (show) {
         this.setLyricsInterval();
+        disableScrolling();
       } else {
         clearInterval(this.lyricsInterval);
+        enableScrolling();
       }
     },
   },