优化滚动

src/renderer/components/core/PlayDetail/components/MusicComment/index.vue

@@ -35,7 +35,6 @@ div.comment(:class="$style.comment" ref="dom_container")
 
 <script>
 import { mapGetters } from 'vuex'
-import { scrollTo } from '@renderer/utils'
 import music from '@renderer/utils/music'
 import CommentFloor from './CommentFloor'
 
@@ -170,7 +169,7 @@ export default {
         this.newComment.page = page
         this.newComment.list = comment.comments
         this.$nextTick(() => {
-          scrollTo(this.$refs.dom_commentNew, 0, 300)
+          this.$refs.dom_commentNew.scrollTo(0, 0)
         })
       }).catch(err => {
         console.log(err)
@@ -189,7 +188,7 @@ export default {
         this.hotComment.page = page
         this.hotComment.list = hotComment.comments
         this.$nextTick(() => {
-          scrollTo(this.$refs.dom_commentHot, 0, 300)
+          this.$refs.dom_commentHot.scrollTo(0, 0)
         })
       }).catch(err => {
         console.log(err)
@@ -321,6 +320,7 @@ export default {
   height: 100%;
   padding-left: 15px;
   padding-right: 10px;
+  scroll-behavior: smooth;
 }
 .commentLabel {
   padding: 15px;

src/renderer/views/Search.vue

@@ -66,7 +66,7 @@ div(:class="$style.search")
 
 <script>
 import { mapGetters, mapActions, mapMutations } from 'vuex'
-import { scrollTo, clipboardWriteText, assertApiSupport, openUrl } from '@renderer/utils'
+import { clipboardWriteText, assertApiSupport, openUrl } from '@renderer/utils'
 import musicSdk from '@renderer/utils/music'
 import { defaultList } from '@renderer/core/share/list'
 import { getList } from '@renderer/core/share/utils'
@@ -264,7 +264,7 @@ export default {
       this.search({ text, page, limit: this.listInfo.limit }).then(data => {
         this.page = page
         this.$nextTick(() => {
-          scrollTo(this.$refs.dom_scrollContent, 0)
+          this.$refs.dom_scrollContent.scrollTo(0, 0)
         })
       }).finally(() => {
         this.isLoading = false
@@ -569,6 +569,8 @@ export default {
 .tbody {
   flex: auto;
   overflow-y: auto;
+  scroll-behavior: smooth;
+
   td {
     font-size: 12px;
     :global(.badge) {

src/renderer/views/list/components/SearchList.vue

@@ -26,8 +26,7 @@ teleport(to="#view")
 </template>
 
 <script>
-import { clipboardReadText, debounce, scrollTo } from '@renderer/utils'
+import { clipboardReadText, debounce } from '@renderer/utils'
-let canceleFn
 
 
 // https://blog.csdn.net/xcxy2015/article/details/77164126#comments
@@ -223,13 +222,13 @@ export default {
       let dom = this.$refs.dom_list.children[this.selectIndex]
       let offsetTop = dom.offsetTop
       let scrollTop = this.$refs.dom_scrollContainer.scrollTop
+      let top
       if (offsetTop < scrollTop) {
-        if (canceleFn) canceleFn()
+        top = offsetTop
-        canceleFn = scrollTo(this.$refs.dom_scrollContainer, offsetTop, 200, () => canceleFn = null)
       } else if (offsetTop + dom.clientHeight > this.$refs.dom_scrollContainer.clientHeight + scrollTop) {
-        if (canceleFn) canceleFn()
+        top = offsetTop + dom.clientHeight - this.$refs.dom_scrollContainer.clientHeight
-        canceleFn = scrollTo(this.$refs.dom_scrollContainer, offsetTop + dom.clientHeight - this.$refs.dom_scrollContainer.clientHeight, 200, () => canceleFn = null)
+      } else return
-      }
+      this.$refs.dom_scrollContainer.scrollTo(0, top)
     },
     handleContextMenu() {
       let str = clipboardReadText()
@@ -345,6 +344,8 @@ export default {
     height: 0;
     transition-property: height;
     position: relative;
+    scroll-behavior: smooth;
+
     li {
       position: relative;
       cursor: pointer;

src/renderer/views/songList/SongList.vue

@@ -56,7 +56,6 @@ div(:class="$style.container")
 
 <script>
 import { mapGetters, mapMutations, mapActions } from 'vuex'
-import { scrollTo } from '@renderer/utils'
 import TagList from './components/TagList'
 import { tempList } from '@renderer/core/share/list'
 export default {
@@ -122,7 +121,7 @@ export default {
       this.$nextTick(() => {
         this.getList(1).then(() => {
           this.$nextTick(() => {
-            scrollTo(this.$refs.dom_scrollContent, 0)
+            this.$refs.dom_scrollContent.scrollTo(0, 0)
           })
         })
       })
@@ -139,7 +138,7 @@ export default {
       this.$nextTick(() => {
         this.getList(1).then(() => {
           this.$nextTick(() => {
-            scrollTo(this.$refs.dom_scrollContent, 0)
+            this.$refs.dom_scrollContent.scrollTo(0, 0)
           })
         })
       })
@@ -231,7 +230,7 @@ export default {
     handleToggleListPage(page) {
       this.getList(page).then(() => {
         this.$nextTick(() => {
-          scrollTo(this.$refs.dom_scrollContent, 0)
+          this.$refs.dom_scrollContent.scrollTo(0, 0)
         })
       })
     },
@@ -403,7 +402,9 @@ export default {
   align-items: center;
   padding-top: 20%;
 }
-
+.songList {
+  scroll-behavior: smooth;
+}
 .song-list-header {
   display: flex;
   flex-flow: row nowrap;