perf(scrollbar): use transform replace top and left

vexip-ui · Jul 6, 2021 · 5a0e272 · 5a0e272
1 parent f0dab34
commit 5a0e272
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 5 deletions.
diff --git a/components/scroll/scrollbar.vue b/components/scroll/scrollbar.vue
@@ -112,15 +112,16 @@ export default defineComponent({
       const style: CSSProperties = {
         backgroundColor: props.barColor
       }
-      const position = `${((100 - props.barLength) * currentScroll.value) / 100}%`
+      const position = `${((100 - props.barLength) * currentScroll.value) / props.barLength}%`
       const length = `${props.barLength}%`
 
       if (type.value === ScrollbarType.VERTICAL) {
-        style.top = position
         style.height = length
+        style.transform = `translate3d(0, ${position}, 0)`
       } else {
-        style.left = position
+        // style.left = position
         style.width = length
+        style.transform = `translate3d(${position}, 0, 0)`
       }
 
       if (isDefined(props.duration) && props.duration >= 0) {

diff --git a/style/scroll.scss b/style/scroll.scss
@@ -18,8 +18,10 @@
   &__wrapper {
     position: relative;
     vertical-align: top;
+    will-change: transform;
     transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
     transition-duration: 140ms;
+    transition-property: transform;
 
     &--scrolling,
     &--using-bar,

diff --git a/style/scrollbar.scss b/style/scrollbar.scss
@@ -63,12 +63,12 @@
     cursor: pointer;
     background-color: $vxp-scrollbar-color-bg-bar;
     border-radius: 3px;
+    will-change: transform;
     transition:
       width $vxp-transition-base,
       height $vxp-transition-base,
       $vxp-transition-opacity-base,
-      top 200ms $timing,
-      left 200ms $timing;
+      transform 140ms $timing;
 
     &:hover {
       opacity: 0.8;