From 4a8e8066ab128f8b69d7962bbb9c1d5a39417fb6 Mon Sep 17 00:00:00 2001 From: Hyunje Alex Jun Date: Sun, 27 Apr 2014 11:01:11 +0100 Subject: [PATCH] Implement opposite-sided scrollbars. Now when you use `top` for the x-axis scrollbar or `left` for the y-axis scrollbar, the scrollbars will be displayed on the opposite side. --- examples/scrollbars-on-the-opposite-side.html | 39 ++++++++++++++ src/perfect-scrollbar.js | 53 ++++++++++++++++--- 2 files changed, 86 insertions(+), 6 deletions(-) create mode 100644 examples/scrollbars-on-the-opposite-side.html diff --git a/examples/scrollbars-on-the-opposite-side.html b/examples/scrollbars-on-the-opposite-side.html new file mode 100644 index 0000000..171ecf6 --- /dev/null +++ b/examples/scrollbars-on-the-opposite-side.html @@ -0,0 +1,39 @@ + + + + + perfect-scrollbar example + + + + + + + + +
+
+
+
+ + diff --git a/src/perfect-scrollbar.js b/src/perfect-scrollbar.js index da2c891..8585ca4 100644 --- a/src/perfect-scrollbar.js +++ b/src/perfect-scrollbar.js @@ -94,9 +94,13 @@ scrollbarXWidth, scrollbarXLeft, scrollbarXBottom = parseInt($scrollbarXRail.css('bottom'), 10), + isScrollbarXUsingBottom = scrollbarXBottom === scrollbarXBottom, // !isNaN + scrollbarXTop = isScrollbarXUsingBottom ? null : parseInt($scrollbarXRail.css('top'), 10), scrollbarYHeight, scrollbarYTop, scrollbarYRight = parseInt($scrollbarYRail.css('right'), 10), + isScrollbarYUsingRight = scrollbarYRight === scrollbarYRight, // !isNaN + scrollbarYLeft = isScrollbarYUsingRight ? null: parseInt($scrollbarYRail.css('left'), 10), eventClassName = getEventClassName(); var updateContentScrollTop = function (currentTop, deltaY) { @@ -115,7 +119,12 @@ var scrollTop = parseInt(scrollbarYTop * (contentHeight - containerHeight) / (containerHeight - scrollbarYHeight), 10); $this.scrollTop(scrollTop); - $scrollbarXRail.css({bottom: scrollbarXBottom - scrollTop}); + + if (isScrollbarXUsingBottom) { + $scrollbarXRail.css({bottom: scrollbarXBottom - scrollTop}); + } else { + $scrollbarXRail.css({top: scrollbarXTop + scrollTop}); + } }; var updateContentScrollLeft = function (currentLeft, deltaX) { @@ -134,7 +143,12 @@ var scrollLeft = parseInt(scrollbarXLeft * (contentWidth - containerWidth) / (containerWidth - scrollbarXWidth), 10); $this.scrollLeft(scrollLeft); - $scrollbarYRail.css({right: scrollbarYRight - scrollLeft}); + + if (isScrollbarYUsingRight) { + $scrollbarYRail.css({right: scrollbarYRight - scrollLeft}); + } else { + $scrollbarYRail.css({left: scrollbarYLeft + scrollLeft}); + } }; var getSettingsAdjustedThumbSize = function (thumbSize) { @@ -145,8 +159,21 @@ }; var updateScrollbarCss = function () { - $scrollbarXRail.css({left: $this.scrollLeft(), bottom: scrollbarXBottom - $this.scrollTop(), width: containerWidth, display: scrollbarXActive ? "inherit": "none"}); - $scrollbarYRail.css({top: $this.scrollTop(), right: scrollbarYRight - $this.scrollLeft(), height: containerHeight, display: scrollbarYActive ? "inherit": "none"}); + var scrollbarXStyles = {left: $this.scrollLeft(), width: containerWidth, display: scrollbarXActive ? "inherit": "none"}; + if (isScrollbarXUsingBottom) { + scrollbarXStyles.bottom = scrollbarXBottom - $this.scrollTop(); + } else { + scrollbarXStyles.top = scrollbarXTop + $this.scrollTop(); + } + $scrollbarXRail.css(scrollbarXStyles); + + var scrollbarYStyles = {top: $this.scrollTop(), height: containerHeight, display: scrollbarYActive ? "inherit": "none"}; + if (isScrollbarYUsingRight) { + scrollbarYStyles.right = scrollbarYRight - $this.scrollLeft(); + } else { + scrollbarYStyles.left = scrollbarYLeft + $this.scrollLeft(); + } + $scrollbarYRail.css(scrollbarYStyles); $scrollbarX.css({left: scrollbarXLeft, width: scrollbarXWidth}); $scrollbarY.css({top: scrollbarYTop, height: scrollbarYHeight}); }; @@ -557,8 +584,22 @@ var fixIe6ScrollbarPosition = function () { updateScrollbarCss = function () { - $scrollbarX.css({left: scrollbarXLeft + $this.scrollLeft(), bottom: scrollbarXBottom, width: scrollbarXWidth}); - $scrollbarY.css({top: scrollbarYTop + $this.scrollTop(), right: scrollbarYRight, height: scrollbarYHeight}); + var scrollbarXStyles = {left: scrollbarXLeft + $this.scrollLeft(), width: scrollbarXWidth}; + if (isScrollbarXUsingBottom) { + scrollbarXStyles.bottom = scrollbarXBottom; + } else { + scrollbarXStyles.top = scrollbarXTop; + } + $scrollbarX.css(scrollbarXStyles); + + var scrollbarYStyles = {top: scrollbarYTop + $this.scrollTop(), height: scrollbarYHeight}; + if (isScrollbarYUsingRight) { + scrollbarYStyles.right = scrollbarYRight; + } else { + scrollbarYStyles.left = scrollbarYLeft; + } + + $scrollbarY.css(scrollbarYStyles); $scrollbarX.hide().show(); $scrollbarY.hide().show(); };