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

Alex King Daniel Lohse Thomas Dippel Tim Finley Mark Jones Robert Koritnik
Alex King

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!

Daniel Lohse

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).

Tim Finley

+1 to merging in (and documenting) this!

Mark Jones

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

Tim Finley

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).

Robert Koritnik 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. Alex King
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
15 jquery.scrollintoview.js
View
@@ -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);
}
}
11 jquery.scrollintoview.min.js
View
@@ -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.