fix: incorrect bar position when there is a error of scrollHeight in …

…browser
wangyi7099 · May 21, 2018 · 5330cce · 5330cce
1 parent 4df240b
commit 5330cce
Show file tree

Hide file tree

Showing 11 changed files with 86 additions and 59 deletions.
diff --git a/dist/vuescroll.common.js b/dist/vuescroll.common.js
@@ -128,14 +128,14 @@ function eventCenter(dom, eventName, hander) {
 var log = console;
 
 var error = void 0;
-// It only happens when child is inline-block,
+// It only happens when child is inline-block in chrome,
 // scollheight will have a error of
-// 4px in chrome or some other browsers.
-// So write a method to get the error and get the real scrollHeight.
-function getRealScrollHeight(scrollHeight) {
+// 4px, so write a method to compute the error.
+// https://stackoverflow.com/questions/29132892/how-to-auto-resize-an-input-field-vertically-and-not-horizontally-like-facebook/29133328#29133328
+function getScrollError() {
   /* istanbul ignore next */
   if (Vue.prototype.$isServer) return 0;
-  if (error !== undefined) return scrollHeight - error;
+  if (error !== undefined) return error;
   var outer = document.createElement('div');
   outer.style.visibility = 'hidden';
   outer.style.height = '100px';
@@ -150,7 +150,7 @@ function getRealScrollHeight(scrollHeight) {
   outer.appendChild(inner);
   error = outer.scrollHeight - outer.clientHeight;
   outer.parentNode.removeChild(outer);
-  return scrollHeight - error;
+  return error;
 }
 
 function isChildInParent(child, parent) {
@@ -675,7 +675,8 @@ function goScrolling(elm, deltaX, deltaY, speed, easing, scrollingComplete) {
   if (startLocationY + deltaY < 0) {
     deltaY = -startLocationY;
   }
-  var scrollHeight = getRealScrollHeight(elm['scrollHeight']);
+  var error = getScrollError();
+  var scrollHeight = elm['scrollHeight'] - error;
   if (startLocationY + deltaY > scrollHeight) {
     deltaY = scrollHeight - startLocationY;
   }
@@ -711,6 +712,7 @@ var api = {
       var animate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
       var force = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
 
+      var error = getScrollError();
       if (typeof x === 'undefined') {
         x = this.vuescroll.state.internalScrollLeft || 0;
       } else {
@@ -719,7 +721,7 @@ var api = {
       if (typeof y === 'undefined') {
         y = this.vuescroll.state.internalScrollTop || 0;
       } else {
-        y = getNumericValue(y, getRealScrollHeight(this.scrollPanelElm.scrollHeight));
+        y = getNumericValue(y, this.scrollPanelElm.scrollHeight - error);
       }
       this.internalScrollTo(x, y, animate, force);
     },
@@ -729,6 +731,8 @@ var api = {
           _ref2$dy = _ref2.dy,
           dy = _ref2$dy === undefined ? 0 : _ref2$dy;
       var animate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+
+      var error = getScrollError();
       var _vuescroll$state = this.vuescroll.state,
           _vuescroll$state$inte = _vuescroll$state.internalScrollLeft,
           internalScrollLeft = _vuescroll$state$inte === undefined ? 0 : _vuescroll$state$inte,
@@ -739,7 +743,7 @@ var api = {
         internalScrollLeft += getNumericValue(dx, this.scrollPanelElm.scrollWidth);
       }
       if (dy) {
-        internalScrollTop += getNumericValue(dy, getRealScrollHeight(this.scrollPanelElm.scrollHeight));
+        internalScrollTop += getNumericValue(dy, this.scrollPanelElm.scrollHeight - error);
       }
       this.internalScrollTo(internalScrollLeft, internalScrollTop, animate);
     },
@@ -871,11 +875,12 @@ var api = {
 var nativeMode = {
   methods: {
     updateNativeModeBarState: function updateNativeModeBarState() {
+      var error = getScrollError();
       var scrollPanel = this.scrollPanelElm;
       var vuescroll = this.$el;
-      var heightPercentage = vuescroll.clientHeight * 100 / getRealScrollHeight(scrollPanel.scrollHeight);
+      var heightPercentage = vuescroll.clientHeight * 100 / (scrollPanel.scrollHeight - error);
       var widthPercentage = vuescroll.clientWidth * 100 / scrollPanel.scrollWidth;
-      this.bar.vBar.state.posValue = scrollPanel.scrollTop * 100 / vuescroll.clientHeight;
+      this.bar.vBar.state.posValue = (scrollPanel.scrollTop - error) * 100 / vuescroll.clientHeight;
       this.bar.hBar.state.posValue = scrollPanel.scrollLeft * 100 / vuescroll.clientWidth;
       this.bar.vBar.state.size = heightPercentage < 100 ? heightPercentage + '%' : 0;
       this.bar.hBar.state.size = widthPercentage < 100 ? widthPercentage + '%' : 0;
@@ -2848,6 +2853,7 @@ var scrollContent = {
         slots = _ref.slots;
 
     var style = deepMerge(props.state.style, {});
+    var error = getScrollError();
     style.position = 'relative';
     style.minHeight = '100%';
     style.minWidth = '100%';
@@ -2856,6 +2862,9 @@ var scrollContent = {
     if (props.ops.padding) {
       style[props.ops.paddPos] = props.ops.paddValue;
     }
+    if (error) {
+      style.marginBottom = '-' + error + 'px';
+    }
     return h(props.ops.tag, {
       style: style,
       ref: 'scrollContent',

diff --git a/dist/vuescroll.common.min.js b/dist/vuescroll.common.min.js
diff --git a/dist/vuescroll.esm.js b/dist/vuescroll.esm.js
@@ -124,14 +124,14 @@ function eventCenter(dom, eventName, hander) {
 var log = console;
 
 var error = void 0;
-// It only happens when child is inline-block,
+// It only happens when child is inline-block in chrome,
 // scollheight will have a error of
-// 4px in chrome or some other browsers.
-// So write a method to get the error and get the real scrollHeight.
-function getRealScrollHeight(scrollHeight) {
+// 4px, so write a method to compute the error.
+// https://stackoverflow.com/questions/29132892/how-to-auto-resize-an-input-field-vertically-and-not-horizontally-like-facebook/29133328#29133328
+function getScrollError() {
   /* istanbul ignore next */
   if (Vue.prototype.$isServer) return 0;
-  if (error !== undefined) return scrollHeight - error;
+  if (error !== undefined) return error;
   var outer = document.createElement('div');
   outer.style.visibility = 'hidden';
   outer.style.height = '100px';
@@ -146,7 +146,7 @@ function getRealScrollHeight(scrollHeight) {
   outer.appendChild(inner);
   error = outer.scrollHeight - outer.clientHeight;
   outer.parentNode.removeChild(outer);
-  return scrollHeight - error;
+  return error;
 }
 
 function isChildInParent(child, parent) {
@@ -671,7 +671,8 @@ function goScrolling(elm, deltaX, deltaY, speed, easing, scrollingComplete) {
   if (startLocationY + deltaY < 0) {
     deltaY = -startLocationY;
   }
-  var scrollHeight = getRealScrollHeight(elm['scrollHeight']);
+  var error = getScrollError();
+  var scrollHeight = elm['scrollHeight'] - error;
   if (startLocationY + deltaY > scrollHeight) {
     deltaY = scrollHeight - startLocationY;
   }
@@ -707,6 +708,7 @@ var api = {
       var animate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
       var force = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
 
+      var error = getScrollError();
       if (typeof x === 'undefined') {
         x = this.vuescroll.state.internalScrollLeft || 0;
       } else {
@@ -715,7 +717,7 @@ var api = {
       if (typeof y === 'undefined') {
         y = this.vuescroll.state.internalScrollTop || 0;
       } else {
-        y = getNumericValue(y, getRealScrollHeight(this.scrollPanelElm.scrollHeight));
+        y = getNumericValue(y, this.scrollPanelElm.scrollHeight - error);
       }
       this.internalScrollTo(x, y, animate, force);
     },
@@ -725,6 +727,8 @@ var api = {
           _ref2$dy = _ref2.dy,
           dy = _ref2$dy === undefined ? 0 : _ref2$dy;
       var animate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+
+      var error = getScrollError();
       var _vuescroll$state = this.vuescroll.state,
           _vuescroll$state$inte = _vuescroll$state.internalScrollLeft,
           internalScrollLeft = _vuescroll$state$inte === undefined ? 0 : _vuescroll$state$inte,
@@ -735,7 +739,7 @@ var api = {
         internalScrollLeft += getNumericValue(dx, this.scrollPanelElm.scrollWidth);
       }
       if (dy) {
-        internalScrollTop += getNumericValue(dy, getRealScrollHeight(this.scrollPanelElm.scrollHeight));
+        internalScrollTop += getNumericValue(dy, this.scrollPanelElm.scrollHeight - error);
       }
       this.internalScrollTo(internalScrollLeft, internalScrollTop, animate);
     },
@@ -867,11 +871,12 @@ var api = {
 var nativeMode = {
   methods: {
     updateNativeModeBarState: function updateNativeModeBarState() {
+      var error = getScrollError();
       var scrollPanel = this.scrollPanelElm;
       var vuescroll = this.$el;
-      var heightPercentage = vuescroll.clientHeight * 100 / getRealScrollHeight(scrollPanel.scrollHeight);
+      var heightPercentage = vuescroll.clientHeight * 100 / (scrollPanel.scrollHeight - error);
       var widthPercentage = vuescroll.clientWidth * 100 / scrollPanel.scrollWidth;
-      this.bar.vBar.state.posValue = scrollPanel.scrollTop * 100 / vuescroll.clientHeight;
+      this.bar.vBar.state.posValue = (scrollPanel.scrollTop - error) * 100 / vuescroll.clientHeight;
       this.bar.hBar.state.posValue = scrollPanel.scrollLeft * 100 / vuescroll.clientWidth;
       this.bar.vBar.state.size = heightPercentage < 100 ? heightPercentage + '%' : 0;
       this.bar.hBar.state.size = widthPercentage < 100 ? widthPercentage + '%' : 0;
@@ -2844,6 +2849,7 @@ var scrollContent = {
         slots = _ref.slots;
 
     var style = deepMerge(props.state.style, {});
+    var error = getScrollError();
     style.position = 'relative';
     style.minHeight = '100%';
     style.minWidth = '100%';
@@ -2852,6 +2858,9 @@ var scrollContent = {
     if (props.ops.padding) {
       style[props.ops.paddPos] = props.ops.paddValue;
     }
+    if (error) {
+      style.marginBottom = '-' + error + 'px';
+    }
     return h(props.ops.tag, {
       style: style,
       ref: 'scrollContent',

diff --git a/dist/vuescroll.esm.min.js b/dist/vuescroll.esm.min.js
diff --git a/dist/vuescroll.js b/dist/vuescroll.js
@@ -130,14 +130,14 @@ function eventCenter(dom, eventName, hander) {
 var log = console;
 
 var error = void 0;
-// It only happens when child is inline-block,
+// It only happens when child is inline-block in chrome,
 // scollheight will have a error of
-// 4px in chrome or some other browsers.
-// So write a method to get the error and get the real scrollHeight.
-function getRealScrollHeight(scrollHeight) {
+// 4px, so write a method to compute the error.
+// https://stackoverflow.com/questions/29132892/how-to-auto-resize-an-input-field-vertically-and-not-horizontally-like-facebook/29133328#29133328
+function getScrollError() {
   /* istanbul ignore next */
   if (Vue.prototype.$isServer) return 0;
-  if (error !== undefined) return scrollHeight - error;
+  if (error !== undefined) return error;
   var outer = document.createElement('div');
   outer.style.visibility = 'hidden';
   outer.style.height = '100px';
@@ -152,7 +152,7 @@ function getRealScrollHeight(scrollHeight) {
   outer.appendChild(inner);
   error = outer.scrollHeight - outer.clientHeight;
   outer.parentNode.removeChild(outer);
-  return scrollHeight - error;
+  return error;
 }
 
 function isChildInParent(child, parent) {
@@ -677,7 +677,8 @@ function goScrolling(elm, deltaX, deltaY, speed, easing, scrollingComplete) {
   if (startLocationY + deltaY < 0) {
     deltaY = -startLocationY;
   }
-  var scrollHeight = getRealScrollHeight(elm['scrollHeight']);
+  var error = getScrollError();
+  var scrollHeight = elm['scrollHeight'] - error;
   if (startLocationY + deltaY > scrollHeight) {
     deltaY = scrollHeight - startLocationY;
   }
@@ -713,6 +714,7 @@ var api = {
       var animate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
       var force = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
 
+      var error = getScrollError();
       if (typeof x === 'undefined') {
         x = this.vuescroll.state.internalScrollLeft || 0;
       } else {
@@ -721,7 +723,7 @@ var api = {
       if (typeof y === 'undefined') {
         y = this.vuescroll.state.internalScrollTop || 0;
       } else {
-        y = getNumericValue(y, getRealScrollHeight(this.scrollPanelElm.scrollHeight));
+        y = getNumericValue(y, this.scrollPanelElm.scrollHeight - error);
       }
       this.internalScrollTo(x, y, animate, force);
     },
@@ -731,6 +733,8 @@ var api = {
           _ref2$dy = _ref2.dy,
           dy = _ref2$dy === undefined ? 0 : _ref2$dy;
       var animate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+
+      var error = getScrollError();
       var _vuescroll$state = this.vuescroll.state,
           _vuescroll$state$inte = _vuescroll$state.internalScrollLeft,
           internalScrollLeft = _vuescroll$state$inte === undefined ? 0 : _vuescroll$state$inte,
@@ -741,7 +745,7 @@ var api = {
         internalScrollLeft += getNumericValue(dx, this.scrollPanelElm.scrollWidth);
       }
       if (dy) {
-        internalScrollTop += getNumericValue(dy, getRealScrollHeight(this.scrollPanelElm.scrollHeight));
+        internalScrollTop += getNumericValue(dy, this.scrollPanelElm.scrollHeight - error);
       }
       this.internalScrollTo(internalScrollLeft, internalScrollTop, animate);
     },
@@ -873,11 +877,12 @@ var api = {
 var nativeMode = {
   methods: {
     updateNativeModeBarState: function updateNativeModeBarState() {
+      var error = getScrollError();
       var scrollPanel = this.scrollPanelElm;
       var vuescroll = this.$el;
-      var heightPercentage = vuescroll.clientHeight * 100 / getRealScrollHeight(scrollPanel.scrollHeight);
+      var heightPercentage = vuescroll.clientHeight * 100 / (scrollPanel.scrollHeight - error);
       var widthPercentage = vuescroll.clientWidth * 100 / scrollPanel.scrollWidth;
-      this.bar.vBar.state.posValue = scrollPanel.scrollTop * 100 / vuescroll.clientHeight;
+      this.bar.vBar.state.posValue = (scrollPanel.scrollTop - error) * 100 / vuescroll.clientHeight;
       this.bar.hBar.state.posValue = scrollPanel.scrollLeft * 100 / vuescroll.clientWidth;
       this.bar.vBar.state.size = heightPercentage < 100 ? heightPercentage + '%' : 0;
       this.bar.hBar.state.size = widthPercentage < 100 ? widthPercentage + '%' : 0;
@@ -2850,6 +2855,7 @@ var scrollContent = {
         slots = _ref.slots;
 
     var style = deepMerge(props.state.style, {});
+    var error = getScrollError();
     style.position = 'relative';
     style.minHeight = '100%';
     style.minWidth = '100%';
@@ -2858,6 +2864,9 @@ var scrollContent = {
     if (props.ops.padding) {
       style[props.ops.paddPos] = props.ops.paddValue;
     }
+    if (error) {
+      style.marginBottom = '-' + error + 'px';
+    }
     return h(props.ops.tag, {
       style: style,
       ref: 'scrollContent',

diff --git a/dist/vuescroll.min.js b/dist/vuescroll.min.js
diff --git a/src/components/child-components/vuescroll-content.js b/src/components/child-components/vuescroll-content.js
@@ -1,4 +1,4 @@
-import { deepMerge } from '../../util';
+import { deepMerge, getScrollError } from '../../util';
 // scrollContent
 export default {
   name: 'scrollContent',
@@ -14,6 +14,7 @@ export default {
   },
   render(h, { props, slots }) {
     let style = deepMerge(props.state.style, {});
+    const error = getScrollError();
     style.position = 'relative';
     style.minHeight = '100%';
     style.minWidth = '100%';
@@ -22,6 +23,9 @@ export default {
     if (props.ops.padding) {
       style[props.ops.paddPos] = props.ops.paddValue;
     }
+    if (error) {
+      style.marginBottom = `-${error}px`;
+    }
     return h(
       props.ops.tag,
       {

diff --git a/src/mixins/api.js b/src/mixins/api.js
@@ -3,7 +3,7 @@ import {
   easingPattern
 } from '../third-party/easingPattern';
 import { core } from '../third-party/scroller/animate';
-import { log, getRealScrollHeight, isChildInParent } from '../util';
+import { log, getScrollError, isChildInParent } from '../util';
 
 function getNumericValue(distance, size) {
   let number;
@@ -28,7 +28,8 @@ function goScrolling(elm, deltaX, deltaY, speed, easing, scrollingComplete) {
   if (startLocationY + deltaY < 0) {
     deltaY = -startLocationY;
   }
-  const scrollHeight = getRealScrollHeight(elm['scrollHeight']);
+  const error = getScrollError();
+  const scrollHeight = elm['scrollHeight'] - error;
   if (startLocationY + deltaY > scrollHeight) {
     deltaY = scrollHeight - startLocationY;
   }
@@ -68,6 +69,7 @@ export default {
   methods: {
     // public api
     scrollTo({ x, y }, animate = true, force = false) {
+      const error = getScrollError();
       if (typeof x === 'undefined') {
         x = this.vuescroll.state.internalScrollLeft || 0;
       } else {
@@ -76,14 +78,12 @@ export default {
       if (typeof y === 'undefined') {
         y = this.vuescroll.state.internalScrollTop || 0;
       } else {
-        y = getNumericValue(
-          y,
-          getRealScrollHeight(this.scrollPanelElm.scrollHeight)
-        );
+        y = getNumericValue(y, this.scrollPanelElm.scrollHeight - error);
       }
       this.internalScrollTo(x, y, animate, force);
     },
     scrollBy({ dx = 0, dy = 0 }, animate = true) {
+      const error = getScrollError();
       let {
         internalScrollLeft = 0,
         internalScrollTop = 0
@@ -97,7 +97,7 @@ export default {
       if (dy) {
         internalScrollTop += getNumericValue(
           dy,
-          getRealScrollHeight(this.scrollPanelElm.scrollHeight)
+          this.scrollPanelElm.scrollHeight - error
         );
       }
       this.internalScrollTo(internalScrollLeft, internalScrollTop, animate);