Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

"Offset" support #7

Open
wants to merge 1 commit into from

6 participants

@alexkingorg

Not sure if this would be valuable to you as part of the main codeline or not, but for my needs I wanted to be able to define an "offset" - a buffer by which I wanted to the element being scrolled into view to be away from the edge of the browser.

I've only implemented this in the vertical settings for now (additional option of "offset"), but it would be pretty easy to add to the horizontal as well. If you'd like me to clean it up for you, let me know and I'll give it a shot. If you want to rewrite it in your own hand, that's perfectly fine as well.

I hope this is useful and thanks for the very useful plugin!

@annismckenzie

Nice, thank you! That was exactly what I was looking for. A offset: center would probably also be useful (scrolling the element so it's vertically centered within the visible area of the screen).

@timmfin

+1 to merging in (and documenting) this!

@mark0978

Wouldn't offset: middle be more in line with vertical centering?

@timmfin

For me, this isn't about centering. Rather is it about having a slight buffer so that the scrolled-to-item isn't immediately flush with the edge of the container (making it a hair more visually pleasing).

@litera litera added the Feature label
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on May 6, 2012
  1. @alexkingorg
This page is out of date. Refresh to see the latest.
Showing with 18 additions and 8 deletions.
  1. +9 −6 jquery.scrollintoview.js
  2. +9 −2 jquery.scrollintoview.min.js
View
15 jquery.scrollintoview.js
@@ -1,12 +1,14 @@
/*!
* jQuery scrollintoview() plugin and :scrollable selector filter
*
- * Version 1.8 (14 Jul 2011)
+ * Version 1.8.a (5 May 2012)
* Requires jQuery 1.4 or newer
*
* Copyright (c) 2011 Robert Koritnik
* Licensed under the terms of the MIT license
* http://www.opensource.org/licenses/mit-license.php
+ *
+ * Modified by Alex King to add vertical offset support.
*/
(function ($) {
@@ -20,7 +22,8 @@
var settings = {
duration: "fast",
- direction: "both"
+ direction: "both",
+ offset: 0
};
var rootrx = /^(?:html)$/i;
@@ -112,13 +115,13 @@
// vertical scroll
if (options.direction.y === true)
{
- if (rel.top < 0)
+ if (rel.top < 0 + options.offset)
{
- animOptions.scrollTop = dim.s.scroll.top + rel.top;
+ animOptions.scrollTop = dim.s.scroll.top + rel.top - options.offset;
}
- else if (rel.top > 0 && rel.bottom < 0)
+ else if (rel.top > 0 + options.offset && rel.bottom < 0 - options.offset)
{
- animOptions.scrollTop = dim.s.scroll.top + Math.min(rel.top, -rel.bottom);
+ animOptions.scrollTop = dim.s.scroll.top + Math.min(rel.top, -rel.bottom + options.offset);
}
}
View
11 jquery.scrollintoview.min.js
@@ -1,11 +1,18 @@
/*
* jQuery scrollintoview() plugin and :scrollable selector filter
*
- * Version 1.8 (14 Jul 2011)
+ * Version 1.8.a (5 May 2012)
* Requires jQuery 1.4 or newer
*
* Copyright (c) 2011 Robert Koritnik
* Licensed under the terms of the MIT license
* http://www.opensource.org/licenses/mit-license.php
+ *
+ * Modified by Alex King to add vertical offset support.
*/
-(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(f){var k={vertical:{x:!1,y:!0},horizontal:{x:!0,y:!1},both:{x:!0,y:!0},x:{x:!0,y:!1},y:{x:!1,y:!0}},o={duration:"fast",direction:"both",offset:0},l=/^(?:html)$/i,m=function(a){var b=f(window),c=l.test(a[0].nodeName),e;if(c)e={top:0,left:0,bottom:0,right:0};else{var d=a[0],i;i=document.defaultView&&document.defaultView.getComputedStyle?document.defaultView.getComputedStyle(d,null):d.currentStyle;var h=document.defaultView&&document.defaultView.getComputedStyle?!0:!1;e=parseFloat(h?i.borderTopWidth:
+f.css(d,"borderTopWidth"))||0;var g=parseFloat(h?i.borderLeftWidth:f.css(d,"borderLeftWidth"))||0,j=parseFloat(h?i.borderBottomWidth:f.css(d,"borderBottomWidth"))||0,d=parseFloat(h?i.borderRightWidth:f.css(d,"borderRightWidth"))||0;e={top:e,left:g,bottom:j,right:d,vertical:e+j,horizontal:g+d}}b={top:(c?b:a).scrollTop(),left:(c?b:a).scrollLeft()};g={right:c?0:a.innerWidth()-a[0].clientWidth,bottom:c?0:a.innerHeight()-a[0].clientHeight};j=a[0].getBoundingClientRect();return{border:e,scroll:b,scrollbar:g,
+rect:{top:c?0:j.top,left:c?0:j.left,bottom:c?a[0].clientHeight:j.bottom,right:c?a[0].clientWidth:j.right}}};f.fn.extend({scrollintoview:function(a){a=f.extend({},o,a);a.direction=k["string"===typeof a.direction&&a.direction.toLowerCase()]||k.both;var b="";!0===a.direction.x&&(b="horizontal");!0===a.direction.y&&(b=b?"both":"vertical");var c=this.eq(0),e=c.closest(":scrollable("+b+")");if(0<e.length){var e=e.eq(0),d=m(c),b=m(e),c=d.rect.top-(b.rect.top+b.border.top),i=b.rect.bottom-b.border.bottom-
+b.scrollbar.bottom-d.rect.bottom,h=d.rect.left-(b.rect.left+b.border.left),d=b.rect.right-b.border.right-b.scrollbar.right-d.rect.right,g={};!0===a.direction.y&&(c<0+a.offset?g.scrollTop=b.scroll.top+c-a.offset:c>0+a.offset&&i<0-a.offset&&(g.scrollTop=b.scroll.top+Math.min(c,-i+a.offset)));!0===a.direction.x&&(0>h?g.scrollLeft=b.scroll.left+h:0<h&&0>d&&(g.scrollLeft=b.scroll.left+Math.min(h,-d)));f.isEmptyObject(g)?f.isFunction(a.complete)&&a.complete.call(e[0]):(l.test(e[0].nodeName)&&(e=f("html,body")),
+e.animate(g,a.duration).eq(0).queue(function(b){f.isFunction(a.complete)&&a.complete.call(e[0]);b()}))}return this}});var n={auto:!0,scroll:!0,visible:!1,hidden:!1};f.extend(f.expr[":"],{scrollable:function(a,b,c){var b=k["string"===typeof c[3]&&c[3].toLowerCase()]||k.both,c=document.defaultView&&document.defaultView.getComputedStyle?document.defaultView.getComputedStyle(a,null):a.currentStyle,e=n[c.overflowX.toLowerCase()]||!1,d=n[c.overflowY.toLowerCase()]||!1,f=l.test(a.nodeName);if(!e&&!d&&!f)return!1;
+a={height:{scroll:a.scrollHeight,client:a.clientHeight},width:{scroll:a.scrollWidth,client:a.clientWidth},scrollableX:function(){return(e||f)&&this.width.scroll>this.width.client},scrollableY:function(){return(d||f)&&this.height.scroll>this.height.client}};return b.y&&a.scrollableY()||b.x&&a.scrollableX()}})})(jQuery);
Something went wrong with that request. Please try again.