diff --git a/demo.html b/demo.html index ccb957d..d5f1135 100644 --- a/demo.html +++ b/demo.html @@ -16,6 +16,10 @@ e.preventDefault(); $("p:last").scrollintoview({ duration: 5000, complete: notify }); }); + $("a.lastlast").click(function(e){ + e.preventDefault(); + $("p:last strong").scrollintoview({ duration: "normal", complete: notify }); + }); $("a.first").click(function(e){ e.preventDefault(); $("p").scrollintoview({ duration: "normal", complete: notify }); @@ -57,8 +61,9 @@ - Scroll slowly to last paragraph

+ Scroll slowly to last paragraph -- + Scroll to the end of the last paragraph -- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dignissim elit eu neque ultrices nec convallis dui lacinia. Sed ultricies pellentesque fermentum. Quisque erat felis, sagittis fringilla auctor eget, vulputate posuere sem. Donec fermentum mauris eget nunc vehicula gravida. Pellentesque orci nunc, malesuada quis imperdiet nec, tincidunt non dui. Vestibulum iaculis varius risus, in blandit libero dignissim in. Maecenas eros quam, volutpat vel faucibus sit amet, accumsan at nulla. Praesent massa metus, malesuada vitae sodales dapibus, commodo in nunc. Nullam lacinia mollis aliquet. Donec nunc lorem, luctus in dictum vel, tempus sed eros. Phasellus lobortis tincidunt ultrices. Mauris fringilla lacinia massa, vitae lobortis lorem accumsan vel. Suspendisse scelerisque justo dolor. Etiam rhoncus, justo eget consectetur placerat, nisl dui egestas enim, ut consectetur dui tellus sit amet orci. Proin non dolor velit, mollis dictum urna. Aliquam erat volutpat. Nullam tempus tempor viverra. Donec ac arcu mauris. Etiam commodo elit quis mauris egestas eleifend at eget lorem.

@@ -145,9 +150,15 @@

Curabitur eget justo diam. Vivamus elementum tellus ac erat tristique pharetra. Curabitur a elit sed urna bibendum pretium. Nullam sit amet magna sapien, id volutpat nulla. Nam ornare elementum turpis id lacinia. Phasellus mattis nisi quis libero volutpat non ullamcorper risus congue. Donec id nunc mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin tempor turpis in dolor pellentesque quis ultricies tellus consectetur. Sed sed velit at neque luctus fermentum. Donec eu enim sem, at malesuada quam. In erat justo, placerat ut sollicitudin sed, dictum vel justo.

-

+

+ Scroll normally to first paragraph Nam lacinia, risus ac hendrerit tincidunt, orci felis congue turpis, eu gravida eros nulla sed dui. Duis ante risus, semper sed malesuada sit amet, dignissim id libero. Nunc volutpat, lorem sit amet tempor ornare, nunc tellus faucibus eros, sed consequat ipsum felis vitae lacus. Aenean mattis, elit consequat ultricies rutrum, libero purus accumsan ipsum, at rhoncus mauris magna condimentum dolor. Fusce fringilla, magna vel venenatis ullamcorper, ante lacus malesuada augue, id sollicitudin arcu nisl id justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam luctus nisl non tortor vehicula sit amet suscipit nibh egestas. Aliquam aliquam aliquam venenatis. Aenean eget consequat metus. Cras vel velit quam. Nullam sit amet augue dolor. Etiam in turpis at leo ultrices auctor id ut lectus. Donec consectetur ante a lacus lobortis eu sodales est ultrices. Pellentesque quis elit velit. +
... +
... +
... +
... +
... + See me!

- Scroll normally to first paragraph \ No newline at end of file diff --git a/jquery.scrollintoview.js b/jquery.scrollintoview.js index 2f7049e..e852f84 100644 --- a/jquery.scrollintoview.js +++ b/jquery.scrollintoview.js @@ -88,12 +88,14 @@ if (options.direction.y === true) dirStr = dirStr ? "both" : "vertical"; var el = this.eq(0); - var scroller = el.closest(":scrollable(" + dirStr + ")"); + var scroller = el.parent().closest(":scrollable(" + dirStr + ")"); // check if there's anything to scroll in the first place if (scroller.length > 0) { scroller = scroller.eq(0); + // scroll all ancestor :scrollables with same options - except the callback. + scroller.scrollintoview( $.extend({}, arguments[0], { complete:null }) ); var dim = { e: dimensions(el), @@ -171,6 +173,10 @@ $.extend($.expr[":"], { scrollable: function (element, index, meta, stack) { + if ( element == document ) + { + return false; + } var direction = converter[typeof (meta[3]) === "string" && meta[3].toLowerCase()] || converter.both; var styles = (document.defaultView && document.defaultView.getComputedStyle ? document.defaultView.getComputedStyle(element, null) : element.currentStyle); var overflow = { diff --git a/jquery.scrollintoview.min.js b/jquery.scrollintoview.min.js index b1a4b6f..6030068 100644 --- a/jquery.scrollintoview.min.js +++ b/jquery.scrollintoview.min.js @@ -8,4 +8,4 @@ * Licensed under the terms of the MIT license * http://www.opensource.org/licenses/mit-license.php */ -(function(f){var c={vertical:{x:false,y:true},horizontal:{x:true,y:false},both:{x:true,y:true},x:{x:true,y:false},y:{x:false,y:true}};var b={duration:"fast",direction:"both"};var e=/^(?:html)$/i;var g=function(k,j){j=j||(document.defaultView&&document.defaultView.getComputedStyle?document.defaultView.getComputedStyle(k,null):k.currentStyle);var i=document.defaultView&&document.defaultView.getComputedStyle?true:false;var h={top:(parseFloat(i?j.borderTopWidth:f.css(k,"borderTopWidth"))||0),left:(parseFloat(i?j.borderLeftWidth:f.css(k,"borderLeftWidth"))||0),bottom:(parseFloat(i?j.borderBottomWidth:f.css(k,"borderBottomWidth"))||0),right:(parseFloat(i?j.borderRightWidth:f.css(k,"borderRightWidth"))||0)};return{top:h.top,left:h.left,bottom:h.bottom,right:h.right,vertical:h.top+h.bottom,horizontal:h.left+h.right}};var d=function(h){var j=f(window);var i=e.test(h[0].nodeName);return{border:i?{top:0,left:0,bottom:0,right:0}:g(h[0]),scroll:{top:(i?j:h).scrollTop(),left:(i?j:h).scrollLeft()},scrollbar:{right:i?0:h.innerWidth()-h[0].clientWidth,bottom:i?0:h.innerHeight()-h[0].clientHeight},rect:(function(){var k=h[0].getBoundingClientRect();return{top:i?0:k.top,left:i?0:k.left,bottom:i?h[0].clientHeight:k.bottom,right:i?h[0].clientWidth:k.right}})()}};f.fn.extend({scrollintoview:function(j){j=f.extend({},b,j);j.direction=c[typeof(j.direction)==="string"&&j.direction.toLowerCase()]||c.both;var n="";if(j.direction.x===true){n="horizontal"}if(j.direction.y===true){n=n?"both":"vertical"}var l=this.eq(0);var i=l.closest(":scrollable("+n+")");if(i.length>0){i=i.eq(0);var m={e:d(l),s:d(i)};var h={top:m.e.rect.top-(m.s.rect.top+m.s.border.top),bottom:m.s.rect.bottom-m.s.border.bottom-m.s.scrollbar.bottom-m.e.rect.bottom,left:m.e.rect.left-(m.s.rect.left+m.s.border.left),right:m.s.rect.right-m.s.border.right-m.s.scrollbar.right-m.e.rect.right};var k={};if(j.direction.y===true){if(h.top<0){k.scrollTop=m.s.scroll.top+h.top}else{if(h.top>0&&h.bottom<0){k.scrollTop=m.s.scroll.top+Math.min(h.top,-h.bottom)}}}if(j.direction.x===true){if(h.left<0){k.scrollLeft=m.s.scroll.left+h.left}else{if(h.left>0&&h.right<0){k.scrollLeft=m.s.scroll.left+Math.min(h.left,-h.right)}}}if(!f.isEmptyObject(k)){if(e.test(i[0].nodeName)){i=f("html,body")}i.animate(k,j.duration).eq(0).queue(function(o){f.isFunction(j.complete)&&j.complete.call(i[0]);o()})}else{f.isFunction(j.complete)&&j.complete.call(i[0])}}return this}});var a={auto:true,scroll:true,visible:false,hidden:false};f.extend(f.expr[":"],{scrollable:function(k,i,n,h){var m=c[typeof(n[3])==="string"&&n[3].toLowerCase()]||c.both;var l=(document.defaultView&&document.defaultView.getComputedStyle?document.defaultView.getComputedStyle(k,null):k.currentStyle);var o={x:a[l.overflowX.toLowerCase()]||false,y:a[l.overflowY.toLowerCase()]||false,isRoot:e.test(k.nodeName)};if(!o.x&&!o.y&&!o.isRoot){return false}var j={height:{scroll:k.scrollHeight,client:k.clientHeight},width:{scroll:k.scrollWidth,client:k.clientWidth},scrollableX:function(){return(o.x||o.isRoot)&&this.width.scroll>this.width.client},scrollableY:function(){return(o.y||o.isRoot)&&this.height.scroll>this.height.client}};return m.y&&j.scrollableY()||m.x&&j.scrollableX()}})})(jQuery); +(function(g){var j={vertical:{x:false,y:true},horizontal:{x:true,y:false},both:{x:true,y:true},x:{x:true,y:false},y:{x:false,y:true}};var n={duration:"fast",direction:"both"};var k=/^(?:html)$/i;var o=function(b,a){a=a||(document.defaultView&&document.defaultView.getComputedStyle?document.defaultView.getComputedStyle(b,null):b.currentStyle);var f=document.defaultView&&document.defaultView.getComputedStyle?true:false;var c={top:(parseFloat(f?a.borderTopWidth:g.css(b,"borderTopWidth"))||0),left:(parseFloat(f?a.borderLeftWidth:g.css(b,"borderLeftWidth"))||0),bottom:(parseFloat(f?a.borderBottomWidth:g.css(b,"borderBottomWidth"))||0),right:(parseFloat(f?a.borderRightWidth:g.css(b,"borderRightWidth"))||0)};return{top:c.top,left:c.left,bottom:c.bottom,right:c.right,vertical:c.top+c.bottom,horizontal:c.left+c.right}};var l=function(a){var f=g(window);var c=k.test(a[0].nodeName);return{border:c?{top:0,left:0,bottom:0,right:0}:o(a[0]),scroll:{top:(c?f:a).scrollTop(),left:(c?f:a).scrollLeft()},scrollbar:{right:c?0:a.innerWidth()-a[0].clientWidth,bottom:c?0:a.innerHeight()-a[0].clientHeight},rect:(function(){var b=a[0].getBoundingClientRect();return{top:c?0:b.top,left:c?0:b.left,bottom:c?a[0].clientHeight:b.bottom,right:c?a[0].clientWidth:b.right}})()}};g.fn.extend({scrollintoview:function(a){a=g.extend({},n,a);a.direction=j[typeof(a.direction)==="string"&&a.direction.toLowerCase()]||j.both;var f="";if(a.direction.x===true)f="horizontal";if(a.direction.y===true)f=f?"both":"vertical";var c=this.eq(0);var h=c.parent().closest(":scrollable("+f+")");if(h.length>0){h=h.eq(0);h.scrollintoview(g.extend({},arguments[0],{complete:null}));var d={e:l(c),s:l(h)};var e={top:d.e.rect.top-(d.s.rect.top+d.s.border.top),bottom:d.s.rect.bottom-d.s.border.bottom-d.s.scrollbar.bottom-d.e.rect.bottom,left:d.e.rect.left-(d.s.rect.left+d.s.border.left),right:d.s.rect.right-d.s.border.right-d.s.scrollbar.right-d.e.rect.right};var i={};if(a.direction.y===true){if(e.top<0){i.scrollTop=d.s.scroll.top+e.top}else if(e.top>0&&e.bottom<0){i.scrollTop=d.s.scroll.top+Math.min(e.top,-e.bottom)}}if(a.direction.x===true){if(e.left<0){i.scrollLeft=d.s.scroll.left+e.left}else if(e.left>0&&e.right<0){i.scrollLeft=d.s.scroll.left+Math.min(e.left,-e.right)}}if(!g.isEmptyObject(i)){if(k.test(h[0].nodeName)){h=g("html,body")}h.animate(i,a.duration).eq(0).queue(function(b){g.isFunction(a.complete)&&a.complete.call(h[0]);b()})}else{g.isFunction(a.complete)&&a.complete.call(h[0])}}return this}});var m={auto:true,scroll:true,visible:false,hidden:false};g.extend(g.expr[":"],{scrollable:function(b,a,f,c){if(b==document){return false}var h=j[typeof(f[3])==="string"&&f[3].toLowerCase()]||j.both;var d=(document.defaultView&&document.defaultView.getComputedStyle?document.defaultView.getComputedStyle(b,null):b.currentStyle);var e={x:m[d.overflowX.toLowerCase()]||false,y:m[d.overflowY.toLowerCase()]||false,isRoot:k.test(b.nodeName)};if(!e.x&&!e.y&&!e.isRoot){return false}var i={height:{scroll:b.scrollHeight,client:b.clientHeight},width:{scroll:b.scrollWidth,client:b.clientWidth},scrollableX:function(){return(e.x||e.isRoot)&&this.width.scroll>this.width.client},scrollableY:function(){return(e.y||e.isRoot)&&this.height.scroll>this.height.client}};return h.y&&i.scrollableY()||h.x&&i.scrollableX()}})})(jQuery);