Merge pull request #64 from jakubmal/flexible-scroll

Use vertical scroll for horizontal scrollbar if only horizontal scrollbar is present.

README.md

@@ -65,7 +65,11 @@ Default: false
 ### minScrollbarLength
 When set to an integer value, the thumb part of the scrollbar will not shrink below that number of pixels.  
 Default: null
- 
+
+### useBothWheelAxes
+When set to true, and only one (vertical or horizontal) scrollbar is visible then both vertical and horizontal scrolling will affect the scrollbar.
+Default: false
+
 How to Use
 ----------
 

src/perfect-scrollbar.js

@@ -16,7 +16,8 @@
   var defaultSettings = {
     wheelSpeed: 10,
     wheelPropagation: false,
-    minScrollbarLength: null
+    minScrollbarLength: null,
+    useBothWheelAxes: false
   };
 
   $.fn.perfectScrollbar = function (suppliedSettings, option) {
@@ -62,6 +63,8 @@
 
       var $scrollbarX = $("<div class='ps-scrollbar-x'></div>").appendTo($this),
           $scrollbarY = $("<div class='ps-scrollbar-y'></div>").appendTo($this),
+          scrollbarXActive,
+          scrollbarYActive,
           containerWidth,
           containerHeight,
           contentWidth,
@@ -104,20 +107,24 @@
         contentHeight = $this.prop('scrollHeight');
 
         if (containerWidth < contentWidth) {
+          scrollbarXActive = true;
           scrollbarXWidth = getSettingsAdjustedThumbSize(parseInt(containerWidth * containerWidth / contentWidth, 10));
           scrollbarXLeft = parseInt($this.scrollLeft() * (containerWidth - scrollbarXWidth) / (contentWidth - containerWidth), 10);
         }
         else {
+          scrollbarXActive = false;
           scrollbarXWidth = 0;
           scrollbarXLeft = 0;
           $this.scrollLeft(0);
         }
 
         if (containerHeight < contentHeight) {
+          scrollbarYActive = true;
           scrollbarYHeight = getSettingsAdjustedThumbSize(parseInt(containerHeight * containerHeight / contentHeight, 10));
           scrollbarYTop = parseInt($this.scrollTop() * (containerHeight - scrollbarYHeight) / (contentHeight - containerHeight), 10);
         }
         else {
+          scrollbarYActive = false;
           scrollbarYHeight = 0;
           scrollbarYTop = 0;
           $this.scrollTop(0);
@@ -250,8 +257,28 @@
 
         var shouldPrevent = false;
         $this.bind('mousewheel.perfect-scroll', function (e, delta, deltaX, deltaY) {
-          $this.scrollTop($this.scrollTop() - (deltaY * settings.wheelSpeed));
+          if (!settings.useBothWheelAxes) {
-          $this.scrollLeft($this.scrollLeft() + (deltaX * settings.wheelSpeed));
+            // deltaX will only be used for horizontal scrolling and deltaY will
+            // only be used for vertical scrolling - this is the default
+            $this.scrollTop($this.scrollTop() - (deltaY * settings.wheelSpeed));
+            $this.scrollLeft($this.scrollLeft() + (deltaX * settings.wheelSpeed));
+          } else if (scrollbarYActive && !scrollbarXActive) {
+            // only vertical scrollbar is active and useBothWheelAxes option is
+            // active, so let's scroll vertical bar using both mouse wheel axes
+            if (deltaY) {
+              $this.scrollTop($this.scrollTop() - (deltaY * settings.wheelSpeed));
+            } else {
+              $this.scrollTop($this.scrollTop() + (deltaX * settings.wheelSpeed));
+            }
+          } else if (scrollbarXActive && !scrollbarYActive) {
+            // useBothWheelAxes and only horizontal bar is active, so use both
+            // wheel axes for horizontal bar
+            if (deltaX) {
+              $this.scrollLeft($this.scrollLeft() + (deltaX * settings.wheelSpeed));
+            } else {
+              $this.scrollLeft($this.scrollLeft() - (deltaY * settings.wheelSpeed));
+            }
+          }
 
           // update bar position
           updateBarSizeAndPosition();