From fed5f1b44f041eaa013dbf1dc8813a2d5d826890 Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan@youzan.com>
Date: Thu, 25 Jun 2020 17:20:51 +0800
Subject: [PATCH] refactor(Sku): remove scrollCon

---
 src/sku/components/SkuRow.js | 21 ++++++++-------------
 1 file changed, 8 insertions(+), 13 deletions(-)

diff --git a/src/sku/components/SkuRow.js b/src/sku/components/SkuRow.js
index c1843a305..9a039d2a2 100644
--- a/src/sku/components/SkuRow.js
+++ b/src/sku/components/SkuRow.js
@@ -8,12 +8,8 @@ const [createComponent, bem, t] = createNamespace('sku-row');
 export default createComponent({
   mixins: [
     BindEventMixin(function (bind) {
-      if (this.scrollable) {
-        if (!this.scrollCon) {
-          this.scrollCon = this.$refs.skuContent;
-        }
-
-        bind(this.scrollCon, 'scroll', this.onScroll);
+      if (this.scrollable && this.$refs.content) {
+        bind(this.$refs.content, 'scroll', this.onScroll);
       }
     }),
   ],
@@ -25,9 +21,9 @@ export default createComponent({
   data() {
     return {
       present: 0,
+      scrollLeft: 0,
       contentWidth: 0,
       contentItemWidth: 0,
-      scrollLeft: 0,
     };
   },
 
@@ -48,10 +44,9 @@ export default createComponent({
   methods: {
     onScroll() {
       this.$nextTick(() => {
-        const contentWidth = this.scrollCon.clientWidth;
-        const contentItemWidth = this.$refs.skuContentItem.clientWidth;
-        const distance = contentItemWidth - contentWidth;
-        this.present = this.scrollCon.scrollLeft / distance;
+        const { content, contentTop } = this.$refs;
+        const distance = contentTop.offsetWidth - content.offsetWidth;
+        this.present = content.scrollLeft / distance;
       });
     },
   },
@@ -76,8 +71,8 @@ export default createComponent({
     );
 
     const SkuContent = (
-      <div class={bem('content')} ref="skuContent">
-        <div class={bem('content__top')} ref="skuContentItem">
+      <div class={bem('content')} ref="content">
+        <div class={bem('content__top')} ref="contentTop">
           {this.slots('sku-item-group-one')}
         </div>
         <div class={bem('content__bottom')}>