fix: Get gutter more accurately

YvesCoding · Jul 28, 2018 · f3392f6 · f3392f6
1 parent 092495d
commit f3392f6
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 43 deletions.
diff --git a/dist/vuescroll.js b/dist/vuescroll.js
@@ -114,6 +114,22 @@ function defineReactive(target, key, source, souceKey) {
   });
 }
 
+function getAccurateSize(dom) {
+  var clientWidth = void 0;
+  var clientHeight = void 0;
+  try {
+    clientWidth = +window.getComputedStyle(dom).width.slice(0, -2);
+    clientHeight = +window.getComputedStyle(dom).height.slice(0, -2);
+  } catch (error) /* istanbul ignore next */{
+    clientWidth = dom.clientWidth;
+    clientHeight = dom.clientHeight;
+  }
+  return {
+    clientHeight: clientHeight,
+    clientWidth: clientWidth
+  };
+}
+
 var scrollBarWidth = void 0;
 function getGutter() {
   /* istanbul ignore next */
@@ -130,16 +146,13 @@ function getGutter() {
   var offsetWidth = outer.offsetWidth;
   /**
    * We don't use clientWith directly because we want to make
-   * the gutter more accurate (#48)
+   * the gutter more accurate, see issues (#48)
    */
 
-  var clientWith = void 0;
-  try {
-    clientWith = window.getComputedStyle(outer).width.slice(0, -2);
-  } catch (error) /* istanbul ignore next */{
-    clientWith = window.clientWith;
-  }
-  scrollBarWidth = offsetWidth - clientWith;
+  var _getAccurateSize = getAccurateSize(outer),
+      clientWidth = _getAccurateSize.clientWidth;
+
+  scrollBarWidth = offsetWidth - clientWidth;
   document.body.removeChild(outer);
   return scrollBarWidth;
 }
@@ -172,12 +185,6 @@ function isChildInParent(child, parent) {
   return flag;
 }
 
-var pxValueReg = /(.*?)px/;
-function extractNumberFromPx(value) {
-  var _return = pxValueReg.exec(value);
-  return _return && _return[1];
-}
-
 function isSupportTouch() {
   /* istanbul ignore if */
   if (isServer()) return false;
@@ -4002,8 +4009,9 @@ var slideMix = {
       var outerLeft = 0;
       var outerTop = 0;
 
-      var clientWidth = this.$el.clientHeight;
-      var clientHeight = this.$el.clientHeight;
+      var _getAccurateSize = getAccurateSize(this.$el),
+          clientWidth = _getAccurateSize.clientWidth,
+          clientHeight = _getAccurateSize.clientHeight;
 
       var contentWidth = clientWidth + this.scroller.__maxScrollLeft;
       var contentHeight = clientHeight + this.scroller.__maxScrollTop;
@@ -4066,12 +4074,12 @@ var slideMix = {
 var nativeMix = {
   methods: {
     updateNativeModeBarState: function updateNativeModeBarState() {
-      var scrollPanel = this.scrollPanelElm;
       var vuescroll = this.$el;
+      var scrollPanel = this.scrollPanelElm;
       var isPercent = this.mergedOptions.vuescroll.sizeStrategy == 'percent';
-
-      var clientWidth = isPercent ? vuescroll.clientWidth : extractNumberFromPx(this.vuescroll.state.width);
-      var clientHeight = isPercent ? vuescroll.clientHeight : extractNumberFromPx(this.vuescroll.state.height);
+      var accurateSize = getAccurateSize(vuescroll);
+      var clientWidth = isPercent ? accurateSize.clientWidth : this.vuescroll.state.width.slice(0, -2); // xxxpx ==> xxx
+      var clientHeight = isPercent ? accurateSize.clientHeight : this.vuescroll.state.height.slice(0, -2);
 
       var heightPercentage = clientHeight * 100 / scrollPanel.scrollHeight;
       var widthPercentage = clientWidth * 100 / scrollPanel.scrollWidth;

diff --git a/src/mode/native/mixins/update-native.js b/src/mode/native/mixins/update-native.js
@@ -1,18 +1,18 @@
-import { extractNumberFromPx } from 'shared/util';
+import { getAccurateSize } from 'shared/util';
 
 export default {
   methods: {
     updateNativeModeBarState() {
-      const scrollPanel = this.scrollPanelElm;
       const vuescroll = this.$el;
+      const scrollPanel = this.scrollPanelElm;
       const isPercent = this.mergedOptions.vuescroll.sizeStrategy == 'percent';
-
+      const accurateSize = getAccurateSize(vuescroll);
       const clientWidth = isPercent
-        ? vuescroll.clientWidth
-        : extractNumberFromPx(this.vuescroll.state.width);
+        ? accurateSize.clientWidth
+        : this.vuescroll.state.width.slice(0, -2); // xxxpx ==> xxx
       const clientHeight = isPercent
-        ? vuescroll.clientHeight
-        : extractNumberFromPx(this.vuescroll.state.height);
+        ? accurateSize.clientHeight
+        : this.vuescroll.state.height.slice(0, -2);
 
       let heightPercentage = (clientHeight * 100) / scrollPanel.scrollHeight;
       let widthPercentage = (clientWidth * 100) / scrollPanel.scrollWidth;

diff --git a/src/mode/slide/mixins/update-slide.js b/src/mode/slide/mixins/update-slide.js
@@ -1,6 +1,7 @@
 import Scroller from 'core/third-party/scroller/index';
 import { render } from 'core/third-party/scroller/render';
 import { listenContainer } from 'core/third-party/scroller/listener';
+import { getAccurateSize } from 'shared/util';
 
 /**
  * @description refresh and load callback
@@ -203,8 +204,7 @@ export default {
       let outerLeft = 0;
       let outerTop = 0;
 
-      const clientWidth = this.$el.clientHeight;
-      const clientHeight = this.$el.clientHeight;
+      const { clientWidth, clientHeight } = getAccurateSize(this.$el);
 
       const contentWidth = clientWidth + this.scroller.__maxScrollLeft;
       const contentHeight = clientHeight + this.scroller.__maxScrollTop;

diff --git a/src/shared/util.js b/src/shared/util.js
@@ -51,6 +51,22 @@ export function defineReactive(target, key, source, souceKey) {
   });
 }
 
+export function getAccurateSize(dom) {
+  let clientWidth;
+  let clientHeight;
+  try {
+    clientWidth = +window.getComputedStyle(dom).width.slice(0, -2);
+    clientHeight = +window.getComputedStyle(dom).height.slice(0, -2);
+  } catch (error) /* istanbul ignore next */ {
+    clientWidth = dom.clientWidth;
+    clientHeight = dom.clientHeight;
+  }
+  return {
+    clientHeight,
+    clientWidth
+  };
+}
+
 let scrollBarWidth;
 export function getGutter() {
   /* istanbul ignore next */
@@ -67,15 +83,11 @@ export function getGutter() {
   const { offsetWidth } = outer;
   /**
    * We don't use clientWith directly because we want to make
-   * the gutter more accurate (#48)
+   * the gutter more accurate, see issues (#48)
    */
-  let clientWith;
-  try {
-    clientWith = window.getComputedStyle(outer).width.slice(0, -2);
-  } catch (error) /* istanbul ignore next */ {
-    clientWith = window.clientWith;
-  }
-  scrollBarWidth = offsetWidth - clientWith;
+  let { clientWidth } = getAccurateSize(outer);
+
+  scrollBarWidth = offsetWidth - clientWidth;
   document.body.removeChild(outer);
   return scrollBarWidth;
 }
@@ -117,12 +129,6 @@ export function isChildInParent(child, parent) {
   return flag;
 }
 
-const pxValueReg = /(.*?)px/;
-export function extractNumberFromPx(value) {
-  const _return = pxValueReg.exec(value);
-  return _return && _return[1];
-}
-
 export function isSupportTouch() {
   /* istanbul ignore if */
   if (isServer()) return false;