Permalink
Browse files

Scroll boundry fix

  • Loading branch information...
1 parent e1b57f7 commit 81d8d485eccaa990f0eeeee802b47d7fe260a962 Jonathan Azoff committed Jul 15, 2011
Showing with 21 additions and 32 deletions.
  1. +1 −0 README.md
  2. +5 −17 jquery.overscroll.js
  3. +15 −15 jquery.overscroll.min.js
View
@@ -76,6 +76,7 @@ Change Log
+ <https://github.com/azoff/Overscroll/issues/23>
- Added click insulation on drag events
+ <https://github.com/azoff/Overscroll/issues/22>
+ - Fixed bug when calculating container scrollWidth/Height (thanks Riccardo "Rial" Re)
* __1.4.5__
- Changed compiler to uglifyjs
+ <https://github.com/mishoo/UglifyJS>
View
@@ -69,8 +69,7 @@
wheelDelta: 20,
scrollDelta: 15,
thumbThickness: 8,
- thumbOpacity: 0.7,
- boundingBox: 1000000
+ thumbOpacity: 0.7
},
checkIosDevice: function () {
@@ -434,24 +433,15 @@
// gets sizing for the container and thumbs
getSizing: function (container) {
- var
-
- old = {
- left: container.scrollLeft(),
- top: container.scrollTop()
- },
-
- sizing = {};
+ var sizing = {}, parent = container.get(0);
sizing.container = {
width: container.width(),
height: container.height()
- };
+ };
- container.scrollLeft(o.constants.boundingBox).scrollTop(o.constants.boundingBox);
- sizing.container.scrollWidth = container.scrollLeft();
- sizing.container.scrollHeight = container.scrollTop();
- container.scrollTop(0).scrollLeft(0);
+ sizing.container.scrollWidth = (parent.scrollWidth == sizing.container.width ? 0 : parent.scrollWidth);
+ sizing.container.scrollHeight = (parent.scrollHeight == sizing.container.height ? 0 : parent.scrollHeight);
sizing.thumbs = {
horizontal: {
@@ -473,8 +463,6 @@
sizing.container.width -= sizing.thumbs.horizontal.width;
sizing.container.height -= sizing.thumbs.vertical.height;
- container.scrollTop(old.top).scrollLeft(old.left);
-
return sizing;
},
@@ -1,15 +1,15 @@
-(function(l,n,e,b){b=e.fn.overscroll=function(a){a=a||{};return this.each(function(){b.init(e(this),a)})};b=e.fn.removeOverscroll=function(){return this.each(function(){var a=e(this).data(b.removerKey);e.isFunction(a)&&a()})};e.extend(b,{events:{wheel:"mousewheel DOMMouseScroll",start:"select mousedown touchstart",drag:"mousemove touchmove",end:"mouseup mouseleave touchend",ignored:"dragstart drag"},div:"<div/>",removerKey:"overscroll-remover",constants:{driftFrequency:40,driftSequences:22,driftDecay:1.15,
-driftTimeout:100,timeout:400,captureThreshold:3,wheelDelta:20,scrollDelta:15,thumbThickness:8,thumbOpacity:0.7,boundingBox:1E6},checkIosDevice:function(){if(b.isIOS===undefined)b.isIOS=/iP((hone)|(ad)|(od))/.test(navigator.platform);return b.isIOS},init:function(a,c){var d={sizing:b.getSizing(a)};c=e.extend({showThumbs:true,wheelDirection:"vertical",cursor:"move",wheelDelta:b.constants.wheelDelta,scrollDelta:b.constants.scrollDelta,direction:"multi",cancelOn:""},c);if(c.direction!=="multi"&&c.direction!==
-c.wheelDirection)c.wheelDirection=c.direction;c.scrollDelta=n.abs(c.scrollDelta);c.wheelDelta=n.abs(c.wheelDelta);a.removeOverscroll();a.data(b.removerKey,b.remover(a,d));a.css({position:"relative",overflow:"hidden",cursor:c.cursor}).bind(b.events.wheel,d,b.wheel).bind(b.events.start,d,b.start).bind(b.events.end,d,b.stop).bind(b.events.ignored,false);if(c.showThumbs){d.thumbs={};if(d.sizing.container.scrollWidth>0&&c.direction!=="vertical"){d.thumbs.horizontal=e(b.div).css(b.getThumbCss(d.sizing.thumbs.horizontal)).fadeTo(0,
-0);a.prepend(d.thumbs.horizontal)}if(d.sizing.container.scrollHeight>0&&c.direction!=="horizontal"){d.thumbs.vertical=e(b.div).css(b.getThumbCss(d.sizing.thumbs.vertical)).fadeTo(0,0);a.prepend(d.thumbs.vertical)}}d.target=a;d.options=c},remover:function(a,c){return function(){a.css({overflow:"auto",cursor:"default"}).unbind(b.events.wheel,b.wheel).unbind(b.events.start,c,b.start).unbind(b.events.end,c,b.stop).unbind(b.events.ignored,false);if(c.thumbs){c.thumbs.horizontal&&c.thumbs.horizontal.remove();
-c.thumbs.vertical&&c.thumbs.vertical.remove()}}},triggerEvent:function(a,c){c.target.trigger("overscroll:"+a)},toggleThumbs:function(a,c){if(a.thumbs)if(c){a.thumbs.vertical&&a.thumbs.vertical.stop(true,true).fadeTo("fast",b.constants.thumbOpacity);a.thumbs.horizontal&&a.thumbs.horizontal.stop(true,true).fadeTo("fast",b.constants.thumbOpacity)}else{a.thumbs.vertical&&a.thumbs.vertical.fadeTo("fast",0);a.thumbs.horizontal&&a.thumbs.horizontal.fadeTo("fast",0)}},setPosition:function(a,c,d){c.x=a.pageX;
-c.y=a.pageY;c.time=b.time();c.index=d;return c},wheel:function(a,c){b.clearInterval(a.data.target);if(a.wheelDelta)c=a.wheelDelta/(l.opera?-120:120);if(a.detail)c=-a.detail/3;if(!a.data.wheelCapture){a.data.wheelCapture={timeout:null};b.toggleThumbs(a.data,true);a.data.target.stop(true,true).data("dragging",true)}c*=a.data.options.wheelDelta;if(a.data.options.wheelDirection==="horizontal")this.scrollLeft-=c;else this.scrollTop-=c;b.moveThumbs(a,this.scrollLeft,this.scrollTop);a.data.wheelCapture.timeout&&
-clearTimeout(a.data.wheelCapture.timeout);a.data.wheelCapture.timeout=setTimeout(function(){a.data.wheelCapture=undefined;b.toggleThumbs(a.data,false);a.data.target.data("dragging",false)},b.constants.timeout)},moveThumbs:function(a,c,d,g,f,h,i){if(a.data.options.showThumbs){g=a.data.thumbs;f=a.data.sizing;if(g.horizontal){h=c*(1+f.container.width/f.container.scrollWidth);i=d+f.thumbs.horizontal.top;g.horizontal.css("margin",i+"px 0 0 "+h+"px")}if(g.vertical){h=c+f.thumbs.vertical.left;i=d*(1+f.container.height/
-f.container.scrollHeight);g.vertical.css("margin",i+"px 0 0 "+h+"px")}}},start:function(a){b.clearInterval(a.data.target);a.data.startTarget=e(a.target);if(!a.data.startTarget.is(a.data.options.cancelOn)){b.normalizeEvent(a);a.data.target.bind(b.events.drag,a.data,b.drag).stop(true,true).data("dragging",false).data("dragged",false);a.data.position=b.setPosition(a,{});a.data.capture=b.setPosition(a,{},2);b.triggerEvent("dragstart",a.data)}},drag:function(a){b.normalizeEvent(a);a.data.target.data("dragged",
-true);a.data.target.data("dragging")||b.toggleThumbs(a.data,true);if(a.data.options.direction!=="vertical")this.scrollLeft-=a.pageX-a.data.position.x;if(a.data.options.direction!=="horizontal")this.scrollTop-=a.pageY-a.data.position.y;b.moveThumbs(a,this.scrollLeft,this.scrollTop);b.setPosition(a,a.data.position);if(--a.data.capture.index<=0){a.data.target.data("dragging",true);b.setPosition(a,a.data.capture,b.constants.captureThreshold)}},normalizeEvent:function(a){if(b.checkIosDevice()){var c=a.originalEvent.changedTouches[0];
-a.pageX=c.pageX;a.pageY=c.pageY}},time:function(){return(new Date).getTime()},deferClick:function(a){var c=a.data("events");if(c&&c.click&&c.click.length){c=c.click.slice();a.unbind("click").one("click",function(d){d.preventDefault();e.each(c,function(g,f){a.click(f)})})}},stop:function(a){if(a.data.position){a.data.target.unbind(b.events.drag,b.drag);b.triggerEvent("dragend",a.data);a.data.target.data("dragging")?b.drift(this,a,function(c){c.target.data("dragging",false);b.toggleThumbs(c,false)}):
-b.toggleThumbs(a.data,false);if(a.data.target.data("dragged")&&e(a.target).is(a.data.startTarget)){a.data.target.data("dragged",false);b.deferClick(a.data.startTarget);a.data.startTarget=null}a.data.capture=a.data.position=undefined}},clearInterval:function(a){a=e(a);var c=a.data("overscroll-interval");c&&l.clearInterval(c);a.data("overscroll-interval",null)},setInterval:function(a,c){b.clearInterval(a);e(a).data("overscroll-interval",c)},drift:function(a,c,d){if(b.time()-c.data.capture.time>b.constants.driftTimeout)return d.call(null,
-c.data);b.normalizeEvent(c);var g=c.data.options.scrollDelta*(c.pageX-c.data.capture.x),f=c.data.options.scrollDelta*(c.pageY-c.data.capture.y),h=a.scrollLeft,i=a.scrollTop,j=g/b.constants.driftSequences,k=f/b.constants.driftSequences,o=b.constants.driftDecay;if(c.data.options.direction!=="vertical")h-=g;if(c.data.options.direction!=="horizontal")i-=f;b.triggerEvent("driftstart",c.data);b.setInterval(a,l.setInterval(function(){var m=true;if(k>1&&a.scrollTop>i||k<-1&&a.scrollTop<i){m=false;a.scrollTop-=
-k;k/=o}if(j>1&&a.scrollLeft>h||j<-1&&a.scrollLeft<h){m=false;a.scrollLeft-=j;j/=o}b.moveThumbs(c,a.scrollLeft,a.scrollTop);if(m){b.clearInterval(a);b.triggerEvent("driftend",c.data);d.call(null,c.data)}},b.constants.driftFrequency))},getSizing:function(a){var c={left:a.scrollLeft(),top:a.scrollTop()},d={};d.container={width:a.width(),height:a.height()};a.scrollLeft(b.constants.boundingBox).scrollTop(b.constants.boundingBox);d.container.scrollWidth=a.scrollLeft();d.container.scrollHeight=a.scrollTop();
-a.scrollTop(0).scrollLeft(0);d.thumbs={horizontal:{width:d.container.width*d.container.width/d.container.scrollWidth,height:b.constants.thumbThickness,corner:b.constants.thumbThickness/2,left:0,top:d.container.height-b.constants.thumbThickness},vertical:{width:b.constants.thumbThickness,height:d.container.height*d.container.height/d.container.scrollHeight,corner:b.constants.thumbThickness/2,left:d.container.width-b.constants.thumbThickness,top:0}};d.container.width-=d.thumbs.horizontal.width;d.container.height-=
-d.thumbs.vertical.height;a.scrollTop(c.top).scrollLeft(c.left);return d},getThumbCss:function(a){return{position:"absolute","background-color":"black",width:a.width+"px",height:a.height+"px",margin:a.top+"px 0 0 "+a.left+"px","-moz-border-radius":a.corner+"px","-webkit-border-radius":a.corner+"px","border-radius":a.corner+"px"}}})})(window,Math,jQuery);
+(function(l,n,e,c){c=e.fn.overscroll=function(a){a=a||{};return this.each(function(){c.init(e(this),a)})};c=e.fn.removeOverscroll=function(){return this.each(function(){var a=e(this).data(c.removerKey);e.isFunction(a)&&a()})};e.extend(c,{events:{wheel:"mousewheel DOMMouseScroll",start:"select mousedown touchstart",drag:"mousemove touchmove",end:"mouseup mouseleave touchend",ignored:"dragstart drag"},div:"<div/>",removerKey:"overscroll-remover",constants:{driftFrequency:40,driftSequences:22,driftDecay:1.15,
+driftTimeout:100,timeout:400,captureThreshold:3,wheelDelta:20,scrollDelta:15,thumbThickness:8,thumbOpacity:0.7},checkIosDevice:function(){if(c.isIOS===undefined)c.isIOS=/iP((hone)|(ad)|(od))/.test(navigator.platform);return c.isIOS},init:function(a,b){var d={sizing:c.getSizing(a)};b=e.extend({showThumbs:true,wheelDirection:"vertical",cursor:"move",wheelDelta:c.constants.wheelDelta,scrollDelta:c.constants.scrollDelta,direction:"multi",cancelOn:""},b);if(b.direction!=="multi"&&b.direction!==b.wheelDirection)b.wheelDirection=
+b.direction;b.scrollDelta=n.abs(b.scrollDelta);b.wheelDelta=n.abs(b.wheelDelta);a.removeOverscroll();a.data(c.removerKey,c.remover(a,d));a.css({position:"relative",overflow:"hidden",cursor:b.cursor}).bind(c.events.wheel,d,c.wheel).bind(c.events.start,d,c.start).bind(c.events.end,d,c.stop).bind(c.events.ignored,false);if(b.showThumbs){d.thumbs={};if(d.sizing.container.scrollWidth>0&&b.direction!=="vertical"){d.thumbs.horizontal=e(c.div).css(c.getThumbCss(d.sizing.thumbs.horizontal)).fadeTo(0,0);a.prepend(d.thumbs.horizontal)}if(d.sizing.container.scrollHeight>
+0&&b.direction!=="horizontal"){d.thumbs.vertical=e(c.div).css(c.getThumbCss(d.sizing.thumbs.vertical)).fadeTo(0,0);a.prepend(d.thumbs.vertical)}}d.target=a;d.options=b},remover:function(a,b){return function(){a.css({overflow:"auto",cursor:"default"}).unbind(c.events.wheel,c.wheel).unbind(c.events.start,b,c.start).unbind(c.events.end,b,c.stop).unbind(c.events.ignored,false);if(b.thumbs){b.thumbs.horizontal&&b.thumbs.horizontal.remove();b.thumbs.vertical&&b.thumbs.vertical.remove()}}},triggerEvent:function(a,
+b){b.target.trigger("overscroll:"+a)},toggleThumbs:function(a,b){if(a.thumbs)if(b){a.thumbs.vertical&&a.thumbs.vertical.stop(true,true).fadeTo("fast",c.constants.thumbOpacity);a.thumbs.horizontal&&a.thumbs.horizontal.stop(true,true).fadeTo("fast",c.constants.thumbOpacity)}else{a.thumbs.vertical&&a.thumbs.vertical.fadeTo("fast",0);a.thumbs.horizontal&&a.thumbs.horizontal.fadeTo("fast",0)}},setPosition:function(a,b,d){b.x=a.pageX;b.y=a.pageY;b.time=c.time();b.index=d;return b},wheel:function(a,b){c.clearInterval(a.data.target);
+if(a.wheelDelta)b=a.wheelDelta/(l.opera?-120:120);if(a.detail)b=-a.detail/3;if(!a.data.wheelCapture){a.data.wheelCapture={timeout:null};c.toggleThumbs(a.data,true);a.data.target.stop(true,true).data("dragging",true)}b*=a.data.options.wheelDelta;if(a.data.options.wheelDirection==="horizontal")this.scrollLeft-=b;else this.scrollTop-=b;c.moveThumbs(a,this.scrollLeft,this.scrollTop);a.data.wheelCapture.timeout&&clearTimeout(a.data.wheelCapture.timeout);a.data.wheelCapture.timeout=setTimeout(function(){a.data.wheelCapture=
+undefined;c.toggleThumbs(a.data,false);a.data.target.data("dragging",false)},c.constants.timeout)},moveThumbs:function(a,b,d,g,f,h,i){if(a.data.options.showThumbs){g=a.data.thumbs;f=a.data.sizing;if(g.horizontal){h=b*(1+f.container.width/f.container.scrollWidth);i=d+f.thumbs.horizontal.top;g.horizontal.css("margin",i+"px 0 0 "+h+"px")}if(g.vertical){h=b+f.thumbs.vertical.left;i=d*(1+f.container.height/f.container.scrollHeight);g.vertical.css("margin",i+"px 0 0 "+h+"px")}}},start:function(a){c.clearInterval(a.data.target);
+a.data.startTarget=e(a.target);if(!a.data.startTarget.is(a.data.options.cancelOn)){c.normalizeEvent(a);a.data.target.bind(c.events.drag,a.data,c.drag).stop(true,true).data("dragging",false).data("dragged",false);a.data.position=c.setPosition(a,{});a.data.capture=c.setPosition(a,{},2);c.triggerEvent("dragstart",a.data)}},drag:function(a){c.normalizeEvent(a);a.data.target.data("dragged",true);a.data.target.data("dragging")||c.toggleThumbs(a.data,true);if(a.data.options.direction!=="vertical")this.scrollLeft-=
+a.pageX-a.data.position.x;if(a.data.options.direction!=="horizontal")this.scrollTop-=a.pageY-a.data.position.y;c.moveThumbs(a,this.scrollLeft,this.scrollTop);c.setPosition(a,a.data.position);if(--a.data.capture.index<=0){a.data.target.data("dragging",true);c.setPosition(a,a.data.capture,c.constants.captureThreshold)}},normalizeEvent:function(a){if(c.checkIosDevice()){var b=a.originalEvent.changedTouches[0];a.pageX=b.pageX;a.pageY=b.pageY}},time:function(){return(new Date).getTime()},deferClick:function(a){var b=
+a.data("events");if(b&&b.click&&b.click.length){b=b.click.slice();a.unbind("click").one("click",function(d){d.preventDefault();e.each(b,function(g,f){a.click(f)})})}},stop:function(a){if(a.data.position){a.data.target.unbind(c.events.drag,c.drag);c.triggerEvent("dragend",a.data);a.data.target.data("dragging")?c.drift(this,a,function(b){b.target.data("dragging",false);c.toggleThumbs(b,false)}):c.toggleThumbs(a.data,false);if(a.data.target.data("dragged")&&e(a.target).is(a.data.startTarget)){a.data.target.data("dragged",
+false);c.deferClick(a.data.startTarget);a.data.startTarget=null}a.data.capture=a.data.position=undefined}},clearInterval:function(a){a=e(a);var b=a.data("overscroll-interval");b&&l.clearInterval(b);a.data("overscroll-interval",null)},setInterval:function(a,b){c.clearInterval(a);e(a).data("overscroll-interval",b)},drift:function(a,b,d){if(c.time()-b.data.capture.time>c.constants.driftTimeout)return d.call(null,b.data);c.normalizeEvent(b);var g=b.data.options.scrollDelta*(b.pageX-b.data.capture.x),
+f=b.data.options.scrollDelta*(b.pageY-b.data.capture.y),h=a.scrollLeft,i=a.scrollTop,j=g/c.constants.driftSequences,k=f/c.constants.driftSequences,o=c.constants.driftDecay;if(b.data.options.direction!=="vertical")h-=g;if(b.data.options.direction!=="horizontal")i-=f;c.triggerEvent("driftstart",b.data);c.setInterval(a,l.setInterval(function(){var m=true;if(k>1&&a.scrollTop>i||k<-1&&a.scrollTop<i){m=false;a.scrollTop-=k;k/=o}if(j>1&&a.scrollLeft>h||j<-1&&a.scrollLeft<h){m=false;a.scrollLeft-=j;j/=o}c.moveThumbs(b,
+a.scrollLeft,a.scrollTop);if(m){c.clearInterval(a);c.triggerEvent("driftend",b.data);d.call(null,b.data)}},c.constants.driftFrequency))},getSizing:function(a){var b={},d=a.get(0);b.container={width:a.width(),height:a.height()};b.container.scrollWidth=d.scrollWidth==b.container.width?0:d.scrollWidth;b.container.scrollHeight=d.scrollHeight==b.container.height?0:d.scrollHeight;b.thumbs={horizontal:{width:b.container.width*b.container.width/b.container.scrollWidth,height:c.constants.thumbThickness,corner:c.constants.thumbThickness/
+2,left:0,top:b.container.height-c.constants.thumbThickness},vertical:{width:c.constants.thumbThickness,height:b.container.height*b.container.height/b.container.scrollHeight,corner:c.constants.thumbThickness/2,left:b.container.width-c.constants.thumbThickness,top:0}};b.container.width-=b.thumbs.horizontal.width;b.container.height-=b.thumbs.vertical.height;return b},getThumbCss:function(a){return{position:"absolute","background-color":"black",width:a.width+"px",height:a.height+"px",margin:a.top+"px 0 0 "+
+a.left+"px","-moz-border-radius":a.corner+"px","-webkit-border-radius":a.corner+"px","border-radius":a.corner+"px"}}})})(window,Math,jQuery);

0 comments on commit 81d8d48

Please sign in to comment.