Skip to content
Browse files

Modified the code so mouse wheel is released when the scrollbar reaches

top or bottom of the scrollable area to simulate the behaviour of
natural HTML elements such as textarea or div with overflow:auto;

Updated version number.
  • Loading branch information...
1 parent 0e12a32 commit bc85f2291135d770e1c7b012e6db718cdea42336 @rochal rochal committed Dec 6, 2011
Showing with 16 additions and 9 deletions.
  1. +8 −7 slimScroll.js
  2. +8 −2 slimScroll.min.js
View
15 slimScroll.js
@@ -2,7 +2,7 @@
* Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
* and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
*
- * Version: 0.4.1
+ * Version: 0.4.3
*
*/
(function($) {
@@ -34,7 +34,7 @@
// do it for every element that matches selector
this.each(function(){
- var isOverPanel, isOverBar, isDragg, queueHide, barHeight,
+ var isOverPanel, isOverBar, isDragg, queueHide, barHeight, percentScroll,
divS = '<div></div>',
minBarHeight = 30,
releaseScroll = false,
@@ -182,16 +182,15 @@
delta = parseInt(bar.css('top')) + y * wheelStep / 100 * bar.outerHeight();
// move bar, make sure it doesn't go out
- delta = Math.max(delta, 0);
var maxTop = me.outerHeight() - bar.outerHeight();
- delta = Math.min(delta, maxTop);
+ delta = Math.min(Math.max(delta, 0), maxTop);
// scroll the scrollbar
bar.css({ top: delta + 'px' });
}
// calculate actual scroll amount
- var percentScroll = parseInt( bar.css('top') ) / (me.outerHeight() - bar.outerHeight());
+ percentScroll = parseInt(bar.css('top')) / (me.outerHeight() - bar.outerHeight());
delta = percentScroll * (me[0].scrollHeight - me.outerHeight());
if (isJump)
@@ -209,7 +208,6 @@
// trigger hide when scroll is stopped
hideBar();
-
}
var attachWheel = function()
@@ -243,7 +241,10 @@
// recalculate bar height
getBarHeight();
clearTimeout(queueHide);
-
+
+ // release wheel when bar reached top or bottom
+ releaseScroll = percentScroll == ~~ percentScroll;
+
// show only when required
if(barHeight >= me.outerHeight()) {
//allow window scroll
View
10 slimScroll.min.js
@@ -2,6 +2,12 @@
* Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
* and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
*
- * Version: 0.4.1
+ * Version: 0.4.3
*
- */(function(a){jQuery.fn.extend({slimScroll:function(b){var c={wheelStep:20,width:"auto",height:"250px",size:"7px",color:"#000",position:"right",distance:"1px",start:"top",opacity:.4,alwaysVisible:!1,railVisible:!1,railColor:"#333",railOpacity:"0.2",railClass:"slimScrollRail",barClass:"slimScrollBar",wrapperClass:"slimScrollDiv"},d=ops=a.extend(c,b);this.each(function(){var b,c,e,f,g,h="<div></div>",i=30,j=!1,k=parseInt(d.wheelStep),l=d.width,m=d.height,n=d.size,p=d.color,q=d.position,r=d.distance,s=d.start,t=d.opacity,u=d.alwaysVisible,v=d.railVisible,w=d.railColor,x=d.railOpacity,y=a(this),z=a(h).addClass(d.wrapperClass).css({position:"relative",overflow:"hidden",width:l,height:m});y.css({overflow:"hidden",width:l,height:m});var A=a(h).addClass(d.railClass).css({width:n,height:"100%",position:"absolute",top:0,display:u&&v?"block":"none","border-radius":n,background:w,opacity:x,zIndex:90}),B=a(h).addClass(d.barClass).css({background:p,width:n,position:"absolute",top:0,opacity:t,display:u?"block":"none","border-radius":n,BorderRadius:n,MozBorderRadius:n,WebkitBorderRadius:n,zIndex:99}),C=q=="right"?{right:r}:{left:r};A.css(C),B.css(C),y.wrap(z),y.parent().append(B),y.parent().append(A),B.draggable({axis:"y",containment:"parent",start:function(){e=!0},stop:function(){e=!1,I()},drag:function(b){E(0,a(this).position().top,!1)}}),A.hover(function(){H()},function(){I()}),B.hover(function(){c=!0},function(){c=!1}),y.hover(function(){b=!0,H(),I()},function(){b=!1,I()});var D=function(a){if(!!b){var a=a||window.event,c=0;a.wheelDelta&&(c=-a.wheelDelta/120),a.detail&&(c=a.detail/3),E(c,!0),a.preventDefault&&!j&&a.preventDefault(),j||(a.returnValue=!1)}},E=function(a,b,c){var d=a;if(b){d=parseInt(B.css("top"))+a*k,d=Math.max(d,0);var e=y.outerHeight()-B.outerHeight();d=Math.min(d,e),B.css({top:d+"px"})}var f=parseInt(B.css("top"))/(y.outerHeight()-B.outerHeight());d=f*(y[0].scrollHeight-y.outerHeight());if(c){d=a;var g=d/y[0].scrollHeight*y.outerHeight();B.css({top:g+"px"})}y.scrollTop(d),H(),I()},F=function(){window.addEventListener?(this.addEventListener("DOMMouseScroll",D,!1),this.addEventListener("mousewheel",D,!1)):document.attachEvent("onmousewheel",D)};F();var G=function(){g=Math.max(y.outerHeight()/y[0].scrollHeight*y.outerHeight(),i),B.css({height:g+"px"})};G();var H=function(){G(),clearTimeout(f);g>=y.outerHeight()?j=!0:(B.fadeIn("fast"),v&&A.fadeIn("fast"))},I=function(){u||(f=setTimeout(function(){!c&&!e&&(B.fadeOut("slow"),A.fadeOut("slow"))},1e3))};s=="bottom"?(B.css({top:"auto",bottom:0}),E(0,!0)):typeof s=="object"&&(E(a(s).position().top,null,!0),u||B.hide())});return this}}),jQuery.fn.extend({slimscroll:jQuery.fn.slimScroll})})(jQuery)
+ */
+(function(d){jQuery.fn.extend({slimScroll:function(n){var b=ops=d.extend({wheelStep:20,width:"auto",height:"250px",size:"7px",color:"#000",position:"right",distance:"1px",start:"top",opacity:0.4,alwaysVisible:!1,railVisible:!1,railColor:"#333",railOpacity:"0.2",railClass:"slimScrollRail",barClass:"slimScrollBar",wrapperClass:"slimScrollDiv"},n);this.each(function(){var o,p,q,v,r,j,k=!1,n=parseInt(b.wheelStep),g=b.width,w=b.height,e=b.size,A=b.color,B=b.position,x=b.distance,s=b.start,C=b.opacity,
+l=b.alwaysVisible,y=b.railVisible,D=b.railColor,E=b.railOpacity,a=d(this),F=d("<div></div>").addClass(b.wrapperClass).css({position:"relative",overflow:"hidden",width:g,height:w});a.css({overflow:"hidden",width:g,height:w});var h=d("<div></div>").addClass(b.railClass).css({width:e,height:"100%",position:"absolute",top:0,display:l&&y?"block":"none","border-radius":e,background:D,opacity:E,zIndex:90}),c=d("<div></div>").addClass(b.barClass).css({background:A,width:e,position:"absolute",top:0,opacity:C,
+display:l?"block":"none","border-radius":e,BorderRadius:e,MozBorderRadius:e,WebkitBorderRadius:e,zIndex:99}),g="right"==B?{right:x}:{left:x};h.css(g);c.css(g);a.wrap(F);a.parent().append(c);a.parent().append(h);c.draggable({axis:"y",containment:"parent",start:function(){q=!0},stop:function(){q=!1;i()},drag:function(){m(0,d(this).position().top,!1)}});h.hover(function(){t()},function(){i()});c.hover(function(){p=!0},function(){p=!1});a.hover(function(){o=!0;t();i()},function(){o=!1;i()});var u=function(a){if(o){var a=
+a||window.event,c=0;a.wheelDelta&&(c=-a.wheelDelta/120);a.detail&&(c=a.detail/3);m(c,!0);a.preventDefault&&!k&&a.preventDefault();if(!k)a.returnValue=!1}},m=function(b,d,e){var f=b;d&&(f=parseInt(c.css("top"))+b*n/100*c.outerHeight(),d=a.outerHeight()-c.outerHeight(),f=Math.min(Math.max(f,0),d),c.css({top:f+"px"}));j=parseInt(c.css("top"))/(a.outerHeight()-c.outerHeight());f=j*(a[0].scrollHeight-a.outerHeight());e&&(f=b,b=f/a[0].scrollHeight*a.outerHeight(),c.css({top:b+"px"}));a.scrollTop(f);t();
+i()};(function(){window.addEventListener?(this.addEventListener("DOMMouseScroll",u,!1),this.addEventListener("mousewheel",u,!1)):document.attachEvent("onmousewheel",u)})();var z=function(){r=Math.max(a.outerHeight()/a[0].scrollHeight*a.outerHeight(),30);c.css({height:r+"px"})};z();var t=function(){z();clearTimeout(v);k=j==~~j;r>=a.outerHeight()?k=!0:(c.fadeIn("fast"),y&&h.fadeIn("fast"))},i=function(){l||(v=setTimeout(function(){!p&&!q&&(c.fadeOut("slow"),h.fadeOut("slow"))},1E3))};"bottom"==s?(c.css({top:a.outerHeight()-
+c.outerHeight()}),m(0,!0)):"object"==typeof s&&(m(d(s).position().top,null,!0),l||c.hide())});return this}});jQuery.fn.extend({slimscroll:jQuery.fn.slimScroll})})(jQuery);

0 comments on commit bc85f22

Please sign in to comment.
Something went wrong with that request. Please try again.