diff --git a/src/js/lib/helper.js b/src/js/lib/helper.js index 648698f..2e12338 100644 --- a/src/js/lib/helper.js +++ b/src/js/lib/helper.js @@ -53,6 +53,14 @@ exports.removePsClasses = function (element) { } }; +exports.outerWidth = function (element) { + return this.toInt(d.css(element, 'width')) + + this.toInt(d.css(element, 'paddingLeft')) + + this.toInt(d.css(element, 'paddingRight')) + + this.toInt(d.css(element, 'borderLeftWidth')) + + this.toInt(d.css(element, 'borderRightWidth')); +}; + exports.env = { isWebKit: 'WebkitAppearance' in document.documentElement.style, supportsTouch: (('ontouchstart' in window) || window.DocumentTouch && document instanceof window.DocumentTouch), diff --git a/src/js/plugin/instances.js b/src/js/plugin/instances.js index 87b4cb9..e0d4b79 100644 --- a/src/js/plugin/instances.js +++ b/src/js/plugin/instances.js @@ -44,6 +44,7 @@ function Instance(element) { i.scrollbarYRight = h.toInt(d.css(i.scrollbarYRail, 'right')); i.isScrollbarYUsingRight = i.scrollbarYRight === i.scrollbarYRight; // !isNaN i.scrollbarYLeft = i.isScrollbarYUsingRight ? null : h.toInt(d.css(i.scrollbarYRail, 'left')); + i.scrollbarYOuterWidth = i.isRtl ? h.outerWidth(i.scrollbarY) : null; i.railBorderYWidth = h.toInt(d.css(i.scrollbarYRail, 'borderTopWidth')) + h.toInt(d.css(i.scrollbarYRail, 'borderBottomWidth')); i.railYMarginHeight = h.toInt(d.css(i.scrollbarYRail, 'marginTop')) + h.toInt(d.css(i.scrollbarYRail, 'marginBottom')); i.railYHeight = null; diff --git a/src/js/plugin/update.js b/src/js/plugin/update.js index ba902dc..b1dd110 100644 --- a/src/js/plugin/update.js +++ b/src/js/plugin/update.js @@ -32,22 +32,21 @@ function updateCss(element, i) { } d.css(i.scrollbarXRail, xRailOffset); - var railYOffset = {top: element.scrollTop, height: i.railYHeight}; - + var yRailOffset = {top: element.scrollTop, height: i.railYHeight}; if (i.isScrollbarYUsingRight) { if (i.isRtl) { - railYOffset.right = i.contentWidth - element.scrollLeft - i.scrollbarYRight - i.scrollbarY.offsetWidth; + yRailOffset.right = i.contentWidth - element.scrollLeft - i.scrollbarYRight - i.scrollbarYOuterWidth; } else { - railYOffset.right = i.scrollbarYRight - element.scrollLeft; + yRailOffset.right = i.scrollbarYRight - element.scrollLeft; } } else { if (i.isRtl) { - railYOffset.left = element.scrollLeft + i.containerWidth * 2 - i.contentWidth - i.scrollbarYLeft - i.scrollbarY.offsetWidth; + yRailOffset.left = element.scrollLeft + i.containerWidth * 2 - i.contentWidth - i.scrollbarYLeft - i.scrollbarYOuterWidth; } else { - railYOffset.left = i.scrollbarYLeft + element.scrollLeft; + yRailOffset.left = i.scrollbarYLeft + element.scrollLeft; } } - d.css(i.scrollbarYRail, railYOffset); + d.css(i.scrollbarYRail, yRailOffset); d.css(i.scrollbarX, {left: i.scrollbarXLeft, width: i.scrollbarXWidth - i.railBorderXWidth}); d.css(i.scrollbarY, {top: i.scrollbarYTop, height: i.scrollbarYHeight - i.railBorderYWidth});