Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Allow slider to have top and bottom != 0

Thanks to @michael-lefebvre. Closes #29
  • Loading branch information...
commit af3183b4b4d80caad59ab99f27f3fbb6affbc7ce 1 parent bc1dd3e
@kristerkari authored
View
11 bin/javascripts/jquery.nanoscroller.js
@@ -153,7 +153,7 @@
};
NanoScroll.prototype.reset = function() {
- var content, contentStyle, contentStyleOverflowY;
+ var content, contentStyle, contentStyleOverflowY, paneBottom, paneTop;
if (!this.el.find("." + this.options.paneClass).length) {
this.generate();
this.stop();
@@ -173,16 +173,19 @@
}
this.contentH = content.scrollHeight + this.scrollW;
this.paneH = this.pane.outerHeight();
- this.sliderH = Math.round(this.paneH / this.contentH * this.paneH);
+ paneTop = parseInt(this.pane.css('top'), 10);
+ paneBottom = parseInt(this.pane.css('bottom'), 10);
+ this.paneOuterH = this.paneH + paneTop + paneBottom;
+ this.sliderH = Math.round(this.paneOuterH / this.contentH * this.paneOuterH);
this.sliderH = this.sliderH > this.options.sliderMinHeight ? this.sliderH : this.options.sliderMinHeight;
if (contentStyleOverflowY === SCROLL && contentStyle.overflowX !== SCROLL) {
this.sliderH += this.scrollW;
}
- this.scrollH = this.paneH - this.sliderH;
+ this.scrollH = this.paneOuterH - this.sliderH;
this.slider.height(this.sliderH);
this.diffH = content.scrollHeight - content.clientHeight;
this.pane.show();
- if (this.paneH >= content.scrollHeight && contentStyleOverflowY !== SCROLL) {
+ if (this.paneOuterH >= content.scrollHeight && contentStyleOverflowY !== SCROLL) {
this.pane.hide();
} else if (this.el.height() === content.scrollHeight && contentStyleOverflowY === SCROLL) {
this.slider.hide();
View
16 bin/javascripts/jquery.nanoscroller.min.js
@@ -1,10 +1,10 @@
-(function(d,e,f){var g,h,i;h={paneClass:"pane",sliderClass:"slider",sliderMinHeight:20,contentClass:"content",iOSNativeScrolling:!1};i=function(){var c,a;c=f.createElement("div");a=c.style;a.position="absolute";a.width="100px";a.height="100px";a.overflow="scroll";a.top="-9999px";f.body.appendChild(c);a=c.offsetWidth-c.clientWidth;f.body.removeChild(c);return a};g=function(){function c(a,b){this.options=b;this.el=d(a);this.doc=d(f);this.win=d(e);this.generate();this.createEvents();this.addEvents();
+(function(d,f,e){var g,h,i;h={paneClass:"pane",sliderClass:"slider",sliderMinHeight:20,contentClass:"content",iOSNativeScrolling:!1};i=function(){var c,a;c=e.createElement("div");a=c.style;a.position="absolute";a.width="100px";a.height="100px";a.overflow="scroll";a.top="-9999px";e.body.appendChild(c);a=c.offsetWidth-c.clientWidth;e.body.removeChild(c);return a};g=function(){function c(a,b){this.options=b;this.el=d(a);this.doc=d(e);this.win=d(f);this.generate();this.createEvents();this.addEvents();
this.reset()}c.name="NanoScroll";c.prototype.createEvents=function(){var a=this;this.events={down:function(b){a.isDrag=!0;a.offsetY=b.clientY-a.slider.offset().top;a.pane.addClass("active");a.doc.bind("mousemove",a.events.drag).bind("mouseup",a.events.up);return!1},drag:function(b){a.sliderY=b.clientY-a.el.offset().top-a.offsetY;a.scroll();return!1},up:function(){a.isDrag=!1;a.pane.removeClass("active");a.doc.unbind("mousemove",a.events.drag).unbind("mouseup",a.events.up);return!1},resize:function(){a.reset()},
panedown:function(b){a.sliderY=b.clientY-a.el.offset().top-0.5*a.sliderH;a.scroll();a.events.down(b)},scroll:function(){var b;!0!==a.isDrag&&(b=a.content[0],b=b.scrollTop/(b.scrollHeight-b.clientHeight)*(a.paneH-a.sliderH),b+a.sliderH===a.paneH&&a.el.trigger("scrollend"),a.slider.css({top:b+"px"}))},wheel:function(b){a.sliderY+=-b.wheelDeltaY||-b.delta;a.scroll();return!1}}};c.prototype.addEvents=function(){var a,b;a=this.events;b=this.pane;this.win.bind("resize",a.resize);this.slider.bind("mousedown",
-a.down);b.bind("mousedown",a.panedown);this.content.bind("scroll",a.scroll);e.addEventListener&&(b=b[0],b.addEventListener("mousewheel",a.wheel,!1),b.addEventListener("DOMMouseScroll",a.wheel,!1))};c.prototype.removeEvents=function(){var a,b;a=this.events;b=this.pane;this.win.unbind("resize",a.resize);this.slider.unbind("mousedown",a.down);b.unbind("mousedown",a.panedown);this.content.unbind("scroll",a.scroll);e.addEventListener&&(b=b[0],b.removeEventListener("mousewheel",a.wheel,!1),b.removeEventListener("DOMMouseScroll",
-a.wheel,!1))};c.prototype.generate=function(){var a;a=this.options;this.el.append('<div class="'+a.paneClass+'"><div class="'+a.sliderClass+'" /></div>');this.content=d(this.el.children("."+a.contentClass)[0]);this.slider=this.el.find("."+a.sliderClass);this.pane=this.el.find("."+a.paneClass);this.scrollW=i();a.iOSNativeScrolling?this.content.css({right:-this.scrollW+"px",WebkitOverflowScrolling:"touch"}):this.content.css({right:-this.scrollW+"px"})};c.prototype.reset=function(){var a,b,c;this.el.find("."+
-this.options.paneClass).length||(this.generate(),this.stop());!0===this.isDead&&(this.isDead=!1,this.pane.show(),this.addEvents());a=this.content[0];b=a.style;c=b.overflowY;"Microsoft Internet Explorer"===e.navigator.appName&&/msie 7./i.test(e.navigator.appVersion)&&e.ActiveXObject&&this.content.css({height:this.content.height()});this.contentH=a.scrollHeight+this.scrollW;this.paneH=this.pane.outerHeight();this.sliderH=Math.round(this.paneH/this.contentH*this.paneH);this.sliderH=this.sliderH>this.options.sliderMinHeight?
-this.sliderH:this.options.sliderMinHeight;"scroll"===c&&"scroll"!==b.overflowX&&(this.sliderH+=this.scrollW);this.scrollH=this.paneH-this.sliderH;this.slider.height(this.sliderH);this.diffH=a.scrollHeight-a.clientHeight;this.pane.show();this.paneH>=a.scrollHeight&&"scroll"!==c?this.pane.hide():this.el.height()===a.scrollHeight&&"scroll"===c?this.slider.hide():this.slider.show()};c.prototype.scroll=function(){this.sliderY=Math.max(0,this.sliderY);this.sliderY=Math.min(this.scrollH,this.sliderY);this.content.scrollTop(-((this.paneH-
-this.contentH+this.scrollW)*this.sliderY/this.scrollH));this.slider.css({top:this.sliderY})};c.prototype.scrollBottom=function(a){var b,c;b=this.diffH;c=this.content[0].scrollTop;this.reset();c<b&&0!==c||this.content.scrollTop(this.contentH-this.content.height()-a)};c.prototype.scrollTop=function(a){this.reset();this.content.scrollTop(+a)};c.prototype.scrollTo=function(a){this.reset();a=d(a).offset().top;a>this.scrollH&&(a/=this.contentH,this.sliderY=a*=this.scrollH,this.scroll())};c.prototype.stop=
-function(){this.isDead=!0;this.removeEvents();this.pane.hide()};return c}();d.fn.nanoScroller=function(c){var a;a=d.extend({},h,c);this.each(function(){var b;b=d.data(this,"scrollbar");b||(b=new g(this,a),d.data(this,"scrollbar",b));return a.scrollBottom?b.scrollBottom(a.scrollBottom):a.scrollTop?b.scrollTop(a.scrollTop):a.scrollTo?b.scrollTo(a.scrollTo):"bottom"===a.scroll?b.scrollBottom(0):"top"===a.scroll?b.scrollTop(0):a.scroll instanceof d?b.scrollTo(a.scroll):a.stop?b.stop():b.reset()})}})(jQuery,
-window,document);
+a.down);b.bind("mousedown",a.panedown);this.content.bind("scroll",a.scroll);f.addEventListener&&(b=b[0],b.addEventListener("mousewheel",a.wheel,!1),b.addEventListener("DOMMouseScroll",a.wheel,!1))};c.prototype.removeEvents=function(){var a,b;a=this.events;b=this.pane;this.win.unbind("resize",a.resize);this.slider.unbind("mousedown",a.down);b.unbind("mousedown",a.panedown);this.content.unbind("scroll",a.scroll);f.addEventListener&&(b=b[0],b.removeEventListener("mousewheel",a.wheel,!1),b.removeEventListener("DOMMouseScroll",
+a.wheel,!1))};c.prototype.generate=function(){var a;a=this.options;this.el.append('<div class="'+a.paneClass+'"><div class="'+a.sliderClass+'" /></div>');this.content=d(this.el.children("."+a.contentClass)[0]);this.slider=this.el.find("."+a.sliderClass);this.pane=this.el.find("."+a.paneClass);this.scrollW=i();a.iOSNativeScrolling?this.content.css({right:-this.scrollW+"px",WebkitOverflowScrolling:"touch"}):this.content.css({right:-this.scrollW+"px"})};c.prototype.reset=function(){var a,b,c,d,e;this.el.find("."+
+this.options.paneClass).length||(this.generate(),this.stop());!0===this.isDead&&(this.isDead=!1,this.pane.show(),this.addEvents());a=this.content[0];b=a.style;c=b.overflowY;"Microsoft Internet Explorer"===f.navigator.appName&&(/msie 7./i.test(f.navigator.appVersion)&&f.ActiveXObject)&&this.content.css({height:this.content.height()});this.contentH=a.scrollHeight+this.scrollW;this.paneH=this.pane.outerHeight();e=parseInt(this.pane.css("top"),10);d=parseInt(this.pane.css("bottom"),10);this.paneOuterH=
+this.paneH+e+d;this.sliderH=Math.round(this.paneOuterH/this.contentH*this.paneOuterH);this.sliderH=this.sliderH>this.options.sliderMinHeight?this.sliderH:this.options.sliderMinHeight;"scroll"===c&&"scroll"!==b.overflowX&&(this.sliderH+=this.scrollW);this.scrollH=this.paneOuterH-this.sliderH;this.slider.height(this.sliderH);this.diffH=a.scrollHeight-a.clientHeight;this.pane.show();this.paneOuterH>=a.scrollHeight&&"scroll"!==c?this.pane.hide():this.el.height()===a.scrollHeight&&"scroll"===c?this.slider.hide():
+this.slider.show()};c.prototype.scroll=function(){this.sliderY=Math.max(0,this.sliderY);this.sliderY=Math.min(this.scrollH,this.sliderY);this.content.scrollTop(-((this.paneH-this.contentH+this.scrollW)*this.sliderY/this.scrollH));this.slider.css({top:this.sliderY})};c.prototype.scrollBottom=function(a){var b,c;b=this.diffH;c=this.content[0].scrollTop;this.reset();c<b&&0!==c||this.content.scrollTop(this.contentH-this.content.height()-a)};c.prototype.scrollTop=function(a){this.reset();this.content.scrollTop(+a)};
+c.prototype.scrollTo=function(a){this.reset();a=d(a).offset().top;a>this.scrollH&&(a/=this.contentH,this.sliderY=a*=this.scrollH,this.scroll())};c.prototype.stop=function(){this.isDead=!0;this.removeEvents();this.pane.hide()};return c}();d.fn.nanoScroller=function(c){var a;a=d.extend({},h,c);this.each(function(){var b;b=d.data(this,"scrollbar");b||(b=new g(this,a),d.data(this,"scrollbar",b));return a.scrollBottom?b.scrollBottom(a.scrollBottom):a.scrollTop?b.scrollTop(a.scrollTop):a.scrollTo?b.scrollTo(a.scrollTo):
+"bottom"===a.scroll?b.scrollBottom(0):"top"===a.scroll?b.scrollTop(0):a.scroll instanceof d?b.scrollTo(a.scroll):a.stop?b.stop():b.reset()})}})(jQuery,window,document);
View
9 coffeescripts/jquery.nanoscroller.coffee
@@ -155,15 +155,18 @@
@content.css height: @content.height()
@contentH = content.scrollHeight + @scrollW
@paneH = @pane.outerHeight()
- @sliderH = Math.round @paneH / @contentH * @paneH
+ paneTop = parseInt(@pane.css('top'), 10)
+ paneBottom = parseInt(@pane.css('bottom'), 10)
+ @paneOuterH = @paneH + paneTop + paneBottom
+ @sliderH = Math.round @paneOuterH / @contentH * @paneOuterH
@sliderH = if @sliderH > @options.sliderMinHeight then @sliderH else @options.sliderMinHeight # set min height
@sliderH += @scrollW if contentStyleOverflowY is SCROLL and contentStyle.overflowX isnt SCROLL
- @scrollH = @paneH - @sliderH
+ @scrollH = @paneOuterH - @sliderH
@slider.height @sliderH
@diffH = content.scrollHeight - content.clientHeight
@pane.show()
- if @paneH >= content.scrollHeight and contentStyleOverflowY isnt SCROLL
+ if @paneOuterH >= content.scrollHeight and contentStyleOverflowY isnt SCROLL
@pane.hide()
else if @el.height() is content.scrollHeight and contentStyleOverflowY is SCROLL
@slider.hide()
Please sign in to comment.
Something went wrong with that request. Please try again.